:root {
    --background: #080d16;
    --background-mid: #0d1523;
    --background-deep: #070b12;
    --accent-primary-glow: rgba(78, 141, 205, 0.08);
    --accent-primary-glow-soft: rgba(78, 141, 205, 0.035);
    --accent-secondary-glow: rgba(173, 122, 68, 0.19);
    --accent-secondary-glow-soft: rgba(173, 122, 68, 0.058);
    --canvas-hues: 210, 32, 198;
    --canvas-base-start: #070b14;
    --canvas-base-mid: #0b1220;
    --canvas-base-end: #060a11;
    --canvas-link-rgb: 200, 200, 200;
    --canvas-orb-count: 12;
    --canvas-orb-count-reduced: 8;
    --canvas-orb-speed: 0.09;
    --canvas-orb-wander: 0.0015;
    --canvas-orb-damping: 0.9985;
    --canvas-orb-max-velocity-multiplier: 3.2;
    --canvas-orb-boundary-padding: 512;
    --canvas-orb-reseed-ms: 0;
    --canvas-orb-radius-min: 150;
    --canvas-orb-radius-range: 320;
    --canvas-orb-pulse-amplitude: 50;
    --canvas-orb-pulse-speed-min: 0.00025;
    --canvas-orb-pulse-speed-max: 0.00085;
    --canvas-line-max-distance: 1760;
    --canvas-line-alpha-falloff: 9600;

    --canvas-orb-alpha-min: 0.006;
    --canvas-orb-alpha-range: 0.03;
    --canvas-line-alpha-base: 0.09;
}

html[data-mantine-color-scheme="light"] {
    --background: #f5f8ff;
    --background-mid: #d5e0f3;
    --background-deep: #c9dcfc;
    --accent-primary-glow: rgba(67, 123, 192, 0.34);
    --accent-primary-glow-soft: rgba(67, 123, 192, 0.24);
    --accent-secondary-glow: rgba(195, 138, 81, 0.28);
    --accent-secondary-glow-soft: rgba(195, 138, 81, 0.26);
    --canvas-base-start: #f4f7ff;
    --canvas-base-mid: #e9f0fb;
    --canvas-base-end: #dfe8f6;
    --canvas-link-rgb: 128, 133, 152;
    --canvas-orb-count: 8;
    --canvas-orb-count-reduced: 3;
    --canvas-orb-alpha-min: 0.05;
    --canvas-orb-alpha-range: 0.09;
    --canvas-line-alpha-base: 0.09;
}
   
html,
body,
#react-entry-point {
    min-height: 100%;
    min-height: 100dvh;
    position: relative;
    isolation: isolate;
    background-color: var(--background);
    background-image: linear-gradient(180deg,
            var(--background-mid) 0%,
            var(--background) 50%,
            var(--background-deep) 100%),
        radial-gradient(circle at 14% -8%,
            var(--accent-primary-glow-soft),
            transparent 52%),
        radial-gradient(circle at 87% 115%,
            var(--accent-secondary-glow-soft),
            transparent 56%);
    text-rendering: optimizeLegibility;
}

.cinematic-background-layer {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.page-accent-glow-layer {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0.55;
    background: radial-gradient(circle at 18% 12%,
            var(--accent-primary-glow),
            transparent 54%),
        radial-gradient(circle at 82% 86%,
            var(--accent-secondary-glow),
            transparent 58%);
}

#mantine-provider {
    position: relative;
}

.mantine-AppShell-root {
    position: relative;
    z-index: 2;
}

/* Give the AppShell header its own opaque surface so page content does not visually bleed through it. */
html[data-mantine-color-scheme="dark"] .mantine-AppShell-header {
    background-color: rgba(7, 11, 18, 0.98);
    background-image: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
}

html[data-mantine-color-scheme="light"] .mantine-AppShell-header {
    background-color: rgba(245, 248, 255, 0.98);
    background-image: none;
    border-bottom: 1px solid rgba(15, 23, 42, 0.12);
    box-shadow: 0 10px 24px rgba(148, 163, 184, 0.24);
}

/* Make Accordion items slightly transparent to allow the background to subtly show through, while maintaining readability. */
.mantine-Accordion-item {
    border-radius: 10px;
}

html[data-mantine-color-scheme="dark"] .mantine-Accordion-item {
    background-color: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

html[data-mantine-color-scheme="light"] .mantine-Accordion-item {
    background-color: rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

/* Override Mantine's default Paper background to be more transparent, allowing the custom background to show through. */
html[data-mantine-color-scheme="dark"] .mantine-Paper-root {
    background-color: rgba(0, 0, 0, 0.3);
    border: 1px solid #ffffff0f;
}

html[data-mantine-color-scheme="light"] .mantine-Paper-root {
    background-color: rgba(255, 255, 255, 0.6);
}

/* Keep form controls on the same dark cinematic surface; Mantine's default dark input is too flat/gray. */
html[data-mantine-color-scheme="dark"] .mantine-Input-input,
html[data-mantine-color-scheme="dark"] .mantine-Select-dropdown,
html[data-mantine-color-scheme="dark"] .mantine-Combobox-dropdown {
    background-color: rgba(7, 11, 18, 0.98) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
}

html[data-mantine-color-scheme="dark"] .mantine-Input-input:focus,
html[data-mantine-color-scheme="dark"] .mantine-Input-input:focus-within {
    border-color: var(--mantine-primary-color-filled) !important;
}

html[data-mantine-color-scheme="dark"] .mantine-Combobox-option:hover,
html[data-mantine-color-scheme="dark"] .mantine-Combobox-option[data-combobox-selected] {
    background-color: rgba(78, 141, 205, 0.18) !important;
}

/* Radio-like controls: segmented controls, checkbox/radio blocks, and tab hover states. */
html[data-mantine-color-scheme="dark"] .mantine-SegmentedControl-root {
    background-color: rgba(7, 11, 18, 0.72) !important;
    border: 1px solid rgba(255, 255, 255, 0.10);
}

html[data-mantine-color-scheme="dark"] .mantine-SegmentedControl-indicator {
    background-color: rgba(78, 141, 205, 0.26) !important;
    border: 1px solid rgba(78, 141, 205, 0.42);
}

html[data-mantine-color-scheme="dark"] .mantine-SegmentedControl-label:hover,
html[data-mantine-color-scheme="dark"] .mantine-Radio-radio:hover,
html[data-mantine-color-scheme="dark"] .mantine-Checkbox-input:hover {
    background-color: rgba(78, 141, 205, 0.14) !important;
}

html[data-mantine-color-scheme="dark"] .mantine-Radio-radio:checked,
html[data-mantine-color-scheme="dark"] .mantine-Checkbox-input:checked {
    background-color: var(--mantine-primary-color-filled) !important;
    border-color: var(--mantine-primary-color-filled) !important;
}

html[data-mantine-color-scheme="dark"] .mantine-Tabs-tab:hover {
    background-color: rgba(78, 141, 205, 0.14) !important;
}

html[data-mantine-color-scheme="dark"] .mantine-Tabs-tab[data-active="true"] {
    background-color: rgba(78, 141, 205, 0.26) !important;
    color: var(--mantine-primary-color-light-color) !important;
}

/* Style the Dash loading spinner container to be semi-transparent, allowing the custom background to show through while indicating loading state. */

html[data-mantine-color-scheme="dark"] div.dash-spinner-container {
    background-color: rgba(116, 116, 116, 0.389);
}

html[data-mantine-color-scheme="light"] div.dash-spinner-container {
    background-color: rgba(255, 255, 255, 0.5);
}


/* Style Mantine Badges to have a semi-transparent background that complements the overall design, while ensuring the text remains legible. */
html[data-mantine-color-scheme="dark"] .mantine-Badge-root {
    background-color: var(--accent-primary-glow);
    color: var(--mantine-color-white);
}

html[data-mantine-color-scheme="light"] .mantine-Badge-root {
    background-color: var(--mantine-color-gray-1);
    color: var(--mantine-color-dark);
}

/* Style Mantine Drawers to have a semi-transparent background that allows the custom background to subtly show through, while maintaining readability and a cohesive design. */

.mantine-Drawer-content {
    border-radius: 8px 0 0 8px !important;
}

html[data-mantine-color-scheme="dark"] .mantine-Drawer-content,
html[data-mantine-color-scheme="dark"] .mantine-AppShell-navbar {
    background-color: transparent !important;
    background-image: linear-gradient(
        180deg,
        rgba(13, 21, 35, 0.98) 0%,
        rgba(8, 13, 22, 0.98) 50%,
        rgba(7, 11, 18, 0.98) 100%
    ),
    radial-gradient(
        circle at 14% -8%,
        var(--accent-primary-glow-soft),
        transparent 52%
    ),
    radial-gradient(
        circle at 87% 115%,
        var(--accent-secondary-glow-soft),
        transparent 56%
    ) !important;
}

html[data-mantine-color-scheme="light"] .mantine-Drawer-content,
html[data-mantine-color-scheme="light"] .mantine-AppShell-navbar {
    background-color: transparent !important;
    background-image: linear-gradient(
        180deg,
        rgba(213, 224, 243, 0.92) 0%,
        rgba(245, 248, 255, 0.9) 50%,
        rgba(201, 220, 252, 0.92) 100%
    ),
    radial-gradient(
        circle at 14% -8%,
        var(--accent-primary-glow-soft),
        transparent 52%
    ),
    radial-gradient(
        circle at 87% 115%,
        var(--accent-secondary-glow-soft),
        transparent 56%
    ) !important;
}

/* Prevent wheel/touch events over navbar from scrolling main page content. */
.mantine-AppShell-navbar {
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.mantine-Drawer-content>.mantine-Drawer-header {
    background-color: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}