:root {
    --bg-color: #0d0f26;
    --bg-color-rgb: 13, 15, 38;
    --card-bg-color: rgba(40, 22, 66, 0.3);
    --border-color: rgba(128, 137, 255, 0.3);
    --glow-color: rgba(160, 170, 255, 0.7);
    --text-color: #e0e4ff;
    --text-secondary-color: #a0a8d8;
    --accent-pink: #f472b6;
    --accent-green: #4ade80;
    --accent-yellow: #facc15;
    --accent-purple: #a78bfa;
    --accent-purple-dark: #8c70d0;
    --font-family: 'SF Pro Rounded', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    --transition-speed: 0.3s;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

html, body {
    height: 100%;
    overflow: hidden; /* Prevent body scroll if main handles it */
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-family); /* Ensured */
    overflow-x: hidden; /* already exists, keep it */
    line-height: 1.6; /* already exists */
    -webkit-font-smoothing: antialiased; /* already exists */
    -moz-osx-font-smoothing: grayscale; /* already exists */
    display: flex; /* Make body a flex container */
    flex-direction: column; /* Stack children vertically */
}

#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-color);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.5s ease;
}

.spinner {
    width: 50px;
    height: 50px;
    border: 5px solid var(--border-color);
    border-top-color: var(--accent-purple);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.background-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
}

.background-gradient::before,
.background-gradient::after {
    content: '';
    position: absolute;
    width: 50vmax;
    height: 50vmax;
    border-radius: 50%;
    opacity: 0.15;
    filter: blur(140px);
    will-change: transform;
}

.background-gradient::before { background-color: var(--accent-purple); top: -20%; left: -20%; animation: move1 15s infinite alternate ease-in-out; }
.background-gradient::after { background-color: var(--accent-pink); bottom: -20%; right: -20%; animation: move2 18s infinite alternate ease-in-out; }

.background-noise {
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: transparent url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="4" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)"/></svg>') 0% 0% / 200px 200px;
    opacity: 0.03;
    animation: noise-pan 10s linear infinite;
}

@keyframes move1 { to { transform: translate(10vw, 15vh) scale(1.2); } }
@keyframes move2 { to { transform: translate(-15vw, -10vh) scale(0.8); } }
@keyframes noise-pan { 0% { transform: translate(0,0); } 100% { transform: translate(-100px, -100px); } }

main {
    width: 100%; /* Ensure it takes up width within flex context */
    /* margin: 0 auto; /* Removed for full width */
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    overflow: hidden;
    gap: 1.5rem;
    padding: 1.5rem;
    /* max-width: 1000px; /* Removed for full width */
}

.section { /* This is the generic .section style */
    display: flex;
    flex-direction: column;
    gap: 1.5rem; /* Default gap for content within a section */
    padding: 2.5rem; /* Default padding for a section */
    background: var(--card-bg-color);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2);
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.section.is-visible { opacity: 1; transform: translateY(0); }

#controls_options_section {
    flex-shrink: 0;
    overflow-y: hidden; /* Main section itself should not scroll, its child will */
    padding: 1.5rem;
    border-radius: 20px;
    background: var(--card-bg-color);
    border: 1px solid var(--border-color);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2);
    opacity: 1;
    transform: translateY(0);
    /* display: flex; /* Modified for side-by-side panels */
    /* flex-direction: column; /* Modified for side-by-side panels */
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start; /* Align items to the top */
    gap: 1.5rem; /* Gap between the two new panels */
}

/* Remove or adapt styles for the old single scrollable container */
/* #controls_options_section > .input-controls { ... } */
/* The .input-controls class might be removed from index.html if not used for the outer container anymore */


/* Styling for the new side-by-side panels */
#function-controls-panel,
#visualization-options-panel {
    flex-basis: 0;
    flex-grow: 1;
    min-width: 250px; /* Minimum width before content gets too cramped */
    height: 260px; /* Reduced fixed height */
    overflow-y: auto;
    padding: 1.25rem; /* Internal padding */
    border: 1px solid var(--border-color); /* Optional border */
    border-radius: 12px; /* Optional rounded corners */
    /* display: grid; /* Changed to flex column */
    /* grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Removed */
    /* align-content: flex-start; /* Removed with grid */
    display: flex;
    flex-direction: column;
    gap: 1.25rem; /* Gap between stacked elements */
    position: relative; /* For positioning children absolutely (e.g., Riemann toggle) */
    background-color: transparent; /* Ensure transparency for backdrop-filter */

    /* Custom Scrollbar Styling */
    scrollbar-width: thin; /* For Firefox */
    scrollbar-color: var(--border-color) rgba(0,0,0,0.1); /* For Firefox: thumb and track color */
}

#function-controls-panel::-webkit-scrollbar,
#visualization-options-panel::-webkit-scrollbar {
    width: 8px;
}

#function-controls-panel::-webkit-scrollbar-track,
#visualization-options-panel::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.1);
    border-radius: 4px;
}

#function-controls-panel::-webkit-scrollbar-thumb,
#visualization-options-panel::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

#function-controls-panel::-webkit-scrollbar-thumb:hover,
#visualization-options-panel::-webkit-scrollbar-thumb:hover {
    background: var(--glow-color);
}

/* Styles for the top-right controls container in the visualization panel */
.viz-panel-top-right-controls {
    position: absolute;
    top: 1rem; /* Corresponds to panel's internal padding */
    right: 1rem; /* Corresponds to panel's internal padding */
    z-index: 10; /* Above other static grid content */
}

.viz-panel-top-right-controls button {
    /* Using general button styles, or can be more specific if needed */
    /* Example: make it match canvas header buttons for consistency */
    padding: 0.4rem 0.8rem;
    font-size: 0.85rem;
}

.slider-row {
    display: flex;
    flex-direction: row;
    gap: 1rem; /* Space between the two control groups in the row */
    width: 100%;
}
.slider-row > .control-group {
    flex: 1; /* Each control group takes half the space */
    min-width: 0; /* Allow shrinking */
}

hr.panel-separator {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 1rem 0;
}

.dependent-settings-block {
    background-color: rgba(12, 12, 25, 0.7);
    padding: 1.15rem; /* Increased padding */
    border-radius: 6px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    margin-top: 0.25rem; /* Keep margin-top as is, or adjust if needed relative to panel gap */
    margin-bottom: 1rem;
    transition: opacity 0.3s ease-out, transform 0.3s ease-out, max-height 0.3s ease-out; /* For animations */
}
.dependent-settings-block .control-group {
    margin-bottom: 0.75rem; /* Increased margin */
}
.dependent-settings-block .control-group:last-child {
    margin-bottom: 0;
}

#domain_coloring_key {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 50; /* Below probe-info (100) but above canvas */
    background-color: rgba(var(--bg-color-rgb, 13, 15, 38), 0.75); /* Fallback if var fails */
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px); /* For Safari */
    padding: 0.75rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    max-width: calc(100% - 20px); /* Prevent overflow from parent */
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--text-secondary-color);
    /* The .hidden class (display: none !important;) will handle visibility */
}

#domain_coloring_key strong {
    color: var(--text-color);
    font-weight: 600;
    display: block; /* Ensures the <br> after it works as expected */
    margin-bottom: 0.25rem; /* Space after the title */
}

#domain_coloring_key span[style*="color"] {
    font-weight: 500; /* Optional: slightly bolder for color examples */
    /* display: inline-block; /* Ensures proper rendering of text with background color */
    /* padding: 0 0.2em; /* Small padding around color names if needed */
}


#canvases_section {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 1.5rem;
    border-radius: 20px;
    background: var(--card-bg-color);
    border: 1px solid var(--border-color);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2);
    opacity: 1;
    transform: translateY(0);
}

#canvases_section .two-column-layout {
    flex-grow: 1;
    min-height: 0;
    /* gap: 2.5rem; already exists */
    align-items: stretch; /* Ensure columns stretch to the same height if content differs, default is stretch */
}

#z_plane_column, #w_plane_column, #laplace_3d_column {
    display: flex;
    flex-direction: column;
    min-height: 0;
    position: relative; /* For overlays and ensuring children are contained */
    overflow: hidden; /* Crucial to prevent canvas from expanding its column */
}

/* Styling for the direct container of the canvas (child of #z_plane_column/#w_plane_column/#laplace_3d_column) */
#z_plane_column > div:not(.canvas-header-line),
#w_plane_column > div:not(.canvas-header-line),
#laplace_3d_column > div:not(.canvas-header-line) {
    flex-grow: 1; /* Allows this container to take up available space in the column */
    min-height: 0; /* Essential for descendant flex items (like canvas) to scale correctly */
    position: relative; /* For positioning overlays like probe_info */
    display: flex; /* Use flex to manage canvas and overlays if needed */
    flex-direction: column; /* Stack canvas and overlays */
}


#z_plane_column .section-title, #w_plane_column .section-title, #laplace_3d_column .section-title {
    flex-shrink: 0;
    /* margin-bottom: 0.75rem; from .section-title */
}

.canvas-header-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem; /* Space between header line and canvas content below */
    flex-wrap: nowrap; /* Ensure title and controls stay on one line */
    gap: 1rem; /* Spacing between title and controls block */
}

.canvas-header-line .section-title {
    /* font-size: 1.2rem; padding-bottom: 0; border-bottom: none; margin-bottom:0; */ /* Applied as per prompt */
    font-size: 1.2rem;
    padding-bottom: 0;
    border-bottom: none;
    margin-bottom: 0;
    min-width: 100px; /* Ensure some part of the title is always visible */
    flex-grow: 1; /* Allow title to take available space */
    flex-shrink: 1; /* Allow title to shrink and truncate */
    overflow: hidden; /* Required for text-overflow */
    text-overflow: ellipsis; /* Add ... if text is too long */
    white-space: nowrap; /* Prevent title from wrapping to multiple lines */
}

.canvas-header-controls {
    display: flex;
    align-items: center;
    gap: 1rem; /* Space between controls like select and button */
    flex-wrap: nowrap; /* Ensure controls themselves don't wrap to new lines within their container */
    /* justify-content: flex-start; /* Not as relevant if not wrapping */
    /* min-width: 0; /* Not needed if flex-shrink is 0 */
    flex-shrink: 0; /* Prevent this container from shrinking, forcing title to shrink first */
}

.canvas-header-controls label {
    margin-bottom: 0;
    font-size: 0.8rem;
}


canvas {
    width: 100%; /* Fallback for non-flex scenarios, or can be primary if parent isn't flex column */
    height: 100%; /* Similar to width */
    /* object-fit: contain; /* Not applicable to canvas, content is drawn */
    display: block; /* Good default */
    border-radius: 8px;
    flex-grow: 1; /* Allows canvas to fill its flex parent (the new div) */
    min-height: 0; /* Essential for scaling within a flex container */
    cursor: crosshair; /* Added default cursor */
}


.section-title {
    font-size: 1.65rem;
    font-weight: 500;
    color: var(--text-color);
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 0.6rem;
    margin-bottom: 0.6rem;
}

.section-text { color: var(--text-secondary-color); max-width: 80ch; }
.section-text strong { color: var(--text-color); font-weight: 600; }

/* The .input-controls class is now used by the new panels if they inherit that class,
   or its styles are directly applied to #function-controls-panel and #visualization-options-panel.
   If .input-controls was on the outer div that is now #controls_options_section,
   its old grid/scroll properties are removed/replaced by flex properties for side-by-side layout.
   The grid layout is now part of #function-controls-panel and #visualization-options-panel.
*/
/*
.input-controls {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
    align-items: start;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
*/

.control-group { display: flex; flex-direction: column; gap: 0.6rem; }
.control-group label { font-size: 0.9rem; font-weight: 400; display: flex; justify-content: space-between; align-items: center; color: var(--text-secondary-color); letter-spacing: 0.01em; /* Align label text with the center of taller inputs */ }
/* Override for checkbox labels to align left */
.control-group label:has(span.custom-checkbox-visual) {
    justify-content: flex-start;
}
.control-group label > output,
.control-group .slider-value-output { /* If output is part of label OR a sibling with this class */
    margin-left: auto; /* Push output to the right if it's meant to be inline */
    font-size: 0.8rem;
    padding: 0.25rem 0.5rem;
    background-color: rgba(0,0,0,0.25);
    border-radius: 6px;
    color: var(--text-color);
    min-width: 40px; /* Ensure consistent width */
    text-align: center;
}
.control-group .number-input {
    width: 70px; padding: 0.5rem; background: rgba(0,0,0,0.2); border: 1px solid var(--border-color);
    color: var(--text-color); border-radius: 8px; font-size: 1.25rem; font-weight: 700; text-align: center; transition: box-shadow var(--transition-speed);
}
.control-group .number-input:focus { outline: none; box-shadow: 0 0 0 3px var(--glow-color); }
.sum-output { font-size: 1.75rem; font-weight: 700; padding: 0.5rem; color: #fff; }

input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    background: rgba(160, 168, 216, 0.3);
    border-radius: 3px;
    outline: none;
    transition: background-color var(--transition-speed), box-shadow var(--transition-speed); /* Smooth transition for background and shadow */
}

input[type="range"]::-moz-range-track { /* Basic track styling for Firefox */
    width: 100%;
    height: 6px;
    background: rgba(160, 168, 216, 0.3);
    border-radius: 3px;
    border: none;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--accent-purple);
    cursor: pointer;
    border: 2px solid #FFFFFF;
    transition: transform 0.15s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

input[type="range"]:hover::-webkit-slider-thumb {
    transform: scale(1.1);
    box-shadow: 0 0 10px color-mix(in srgb, var(--accent-purple) 70%, transparent);
}

input[type="range"]:active::-webkit-slider-thumb {
    transform: scale(1.05);
    background-color: var(--accent-purple-dark);
    box-shadow: 0 0 5px var(--accent-purple-dark);
}

input[type="range"]:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-purple) 50%, white 50%), 0 0 8px var(--accent-purple);
}

/* Firefox Thumb Styles */
input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--accent-purple);
    cursor: pointer;
    border: 2px solid #FFFFFF;
    transition: transform 0.15s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

input[type="range"]:hover::-moz-range-thumb {
    transform: scale(1.1);
    box-shadow: 0 0 10px color-mix(in srgb, var(--accent-purple) 70%, transparent);
}

input[type="range"]:active::-moz-range-thumb {
    transform: scale(1.05);
    background-color: var(--accent-purple-dark);
    box-shadow: 0 0 5px var(--accent-purple-dark);
}

input[type="range"]:focus::-moz-range-thumb {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-purple) 50%, white 50%), 0 0 8px var(--accent-purple);
}

/* Specific inputA and inputB styles are removed to use the general style or specific classes if needed */
/* Example: if inputA needs a pink thumb, add a class to it and style that class */
/* input[type="range"].pink-thumb::-webkit-slider-thumb { background: var(--accent-pink); } */
/* input[type="range"].pink-thumb:hover::-webkit-slider-thumb { box-shadow: 0 0 10px var(--accent-pink); } */


.two-column-layout {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Changed this line */
    gap: 1.5rem; /* Was 2.5rem, then 1.5rem, ensure it's the desired final value, let's assume 1.5rem is fine */
    align-items: start; /* This is for the grid items (.control-group) themselves */
}

/* Three-column layout for Laplace mode */
.two-column-layout:has(#laplace_3d_column:not(.hidden)) {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
}

@media (max-width: 800px) { .two-column-layout { grid-template-columns: 1fr; } }

/* .slider-pair-row is renamed to .slider-row and styled above */
/*
.slider-pair-row {
    display: flex;
    flex-direction: row;
    gap: 2rem;
    align-items: flex-start;
}

.slider-pair-row > .control-group {
    flex: 1;
    min-width: 0;
}
*/

.helix-cards-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }
.helix-card { padding: 1.2rem; border: 1px solid var(--border-color); border-radius: 16px; display: flex; flex-direction: column; gap: 1rem; transition: box-shadow var(--transition-speed), transform var(--transition-speed); }
.helix-card:hover { transform: translateY(-5px); box-shadow: 0 0 15px rgba(128, 137, 255, 0.2); }
.helix-card-title { font-weight: 600; text-align: center; }
.circular-plots-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; justify-items: center; }
.circular-plot-label { text-align: center; font-size: 0.8rem; color: var(--text-secondary-color); }
.linear-component { width: 100%; padding-top: 1rem; }
.linear-bar-bg { height: 16px; width: 100%; background: rgba(0,0,0,0.3); border-radius: 8px; overflow: hidden; }
.linear-bar-fg { height: 100%; border-radius: 8px; }
.linear-bar-label { text-align: center; font-size: 0.9rem; margin-top: 0.5rem; color: var(--text-secondary-color); }

.flowchart-list li { list-style: none; counter-increment: step-counter; margin-bottom: 1rem; padding-left: 2.5rem; position: relative; }
.flowchart-list li::before { content: counter(step-counter); position: absolute; left: 0; top: 0; width: 1.8rem; height: 1.8rem; background: var(--accent-purple); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; box-shadow: 0 0 10px var(--accent-purple); }
.flowchart-list li strong { display: block; font-size: 1.1rem; }

#helix-manipulation-canvas { width: 100% !important; height: 400px !important; background: transparent; border-radius: 12px; cursor: grab; }
#helix-manipulation-canvas:active { cursor: grabbing; }

.attention-viz, .mlp-viz { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; padding: 2rem 0; position: relative; }
.attention-row { display: flex; gap: 1rem; align-items: center; z-index: 2; }
.viz-box { padding: 1rem 1.5rem; border-radius: 8px; border: 1px solid var(--border-color); background: var(--card-bg-color); text-align: center; font-weight: 600; transition: transform var(--transition-speed), box-shadow var(--transition-speed); }
.viz-box:hover { transform: scale(1.05); box-shadow: 0 0 12px var(--glow-color); }
.viz-box-small { padding: 0.5rem 1rem; font-size: 0.9rem; }
.viz-arrow { font-size: 2rem; color: var(--text-secondary-color); }
.viz-label { color: var(--text-secondary-color); font-size: 0.9rem; margin-top: -0.5rem; }

.mlp-stages { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1.5rem; align-items: center; width: 100%; }
.mlp-stage-box { border: 1px solid var(--border-color); border-radius: 12px; padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; align-items: center; min-height: 220px; justify-content: space-between; }

.chart-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; }
.chart-container { position: relative; }
.chart-container svg { overflow: visible; }
.chart-title { text-align: center; margin-bottom: 1rem; font-weight: 600; }

.helix-subspace-container { display: grid; grid-template-rows: 1fr 1fr auto; grid-template-columns: 1fr 1fr; gap: 1.5rem; height: 400px; }
.helix-subspace-linear { grid-column: 1 / -1; }

.precision-comparison { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.precision-box { padding: 1.5rem; border: 1px solid var(--border-color); border-radius: 16px; display: flex; flex-direction: column; gap: 1rem; align-items: center; }

#tooltip {
    position: fixed; display: none; padding: 0.5rem 0.75rem; background: rgba(13, 15, 38, 0.9);
    border: 1px solid var(--border-color); border-radius: 6px; font-size: 0.9rem; pointer-events: none;
    z-index: 10; backdrop-filter: blur(5px); white-space: pre; color: var(--text-color);
}

.fourier-bar, .error-bar { transition: transform 0.2s ease-out; }
.fourier-bar:hover, .error-bar:hover { transform: scaleY(1.05); filter: brightness(1.2); }

.hidden {
    display: none !important;
}

.hidden-visually {
    position: absolute !important;
    height: 1px; width: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap; /* For good measure */
}

/*
button.active {
    box-shadow: 0 0 8px var(--glow-color);
    filter: brightness(1.2);
}
*/

#fullscreen_container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: var(--bg-color);
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: center;
    /* padding: 1px; Removed padding to allow child to be 100% */
    box-sizing: border-box;
}

#fullscreen_container > #w_plane_plotly_container {
    width: 100%;
    height: 100%;
    display: block;
    position: relative;
}

/* Removed !important and specific internal Plotly element targeting for now,
   as the issue might be more related to resize timing or Plotly's own handling. */

#close_fullscreen_btn {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 2001;
    padding: 0.5rem 0.8rem;
    font-size: 1.5rem;
    background: var(--card-bg-color);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

#close_fullscreen_btn:hover {
    background: var(--border-color);
    color: var(--bg-color);
}

/* Basic Button Styling */
button {
    background-color: var(--card-bg-color);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    padding: 0.6rem 1.1rem;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
    font-family: var(--font-family);
    font-size: 0.85rem;
    font-weight: 500;
}

/* More compact buttons specifically for canvas headers */
.canvas-header-controls button {
    padding: 0.4rem 0.8rem; /* Reduced padding - Stays as is, not overridden by general button padding */
    font-size: 0.85rem; /* Slightly smaller font - Stays as is */
}

button:hover {
    background-color: color-mix(in srgb, var(--card-bg-color) 90%, white 10%);
    border-color: var(--accent-purple);
    color: var(--text-color); /* Ensure text color remains readable */
    transform: translateY(-2px);
    box-shadow: 0 3px 10px rgba(var(--bg-color-rgb), 0.3);
}

/* Generic style for button being actively pressed */
button:active {
    background-color: var(--accent-purple-dark);
    border-color: var(--accent-purple-dark);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 1px 5px rgba(var(--bg-color-rgb), 0.2);
    /* filter: brightness(0.95); Removed */
}

/* Container for function selection buttons */
#function-controls-panel > .control-group:first-child > div {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Specific style for persistently active function selection buttons */
#function-controls-panel > .control-group:first-child > div > button.active {
    background-color: var(--accent-purple-dark);
    color: #fff;
    border-color: var(--accent-purple-dark);
    box-shadow: 0 0 8px var(--accent-purple-dark); /* Use var for color */
    filter: brightness(1); /* Reset any generic active brightness - already present */
    transform: translateY(0px); /* Ensure no press effect persists - already present */
}

/* Generic active state for toggle buttons (e.g., for dependent settings) */
button.toggle-active {
    background-color: var(--accent-purple-dark);
    color: #fff;
    border-color: var(--accent-purple-dark);
    box-shadow: 0 0 6px color-mix(in srgb, var(--accent-purple-dark) 70%, transparent);
    transform: translateY(0px); /* Override hover effects for persistent active state */
}

/* Basic Select Styling */
select {
    background-color: rgba(var(--bg-color-rgb), 0.3);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    padding: 0.5rem 2rem 0.5rem 0.75rem; /* Adjusted padding for arrow */
    border-radius: 6px;
    font-family: var(--font-family);
    font-size: 0.85rem; /* Consistent with buttons */
    min-width: 60px;
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23B0B8E0%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.4-5.4-12.8z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 0.65em auto;
    transition: border-color var(--transition-speed), box-shadow var(--transition-speed);
}

/* Apply to .canvas-header-controls select specifically */
.canvas-header-controls select {
    font-size: 0.8rem; /* This is more specific, so it will override the 0.85rem above */
    padding-right: 1.8rem; /* Keep custom padding for smaller selects if needed */
}

select:focus {
    outline: none;
    border-color: var(--accent-purple);
    box-shadow: 0 0 0 3px var(--glow-color);
}

/* Styling for Slider Value Output */
.slider-value-output {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.25rem 0.5rem;
    background-color: rgba(0,0,0,0.25);
    border-radius: 6px;
    font-size: 0.8rem; /* Applied as per prompt */
    color: var(--text-color); /* Applied as per prompt */
    min-width: 40px; /* Already part of the unified .slider-value-output style */
    text-align: center; /* Already part of the unified .slider-value-output style */
    /* No margin-left here, as it's handled by the parent label or specific positioning rules */
}

/* Styling for Slider Container in Control Groups */
.control-group .slider-container {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.control-group .slider-container input[type="range"] {
    flex-grow: 1;
}

.control-group .slider-container button {
    padding: 0.4rem 0.6rem;
    font-size: 0.8rem;
    flex-shrink: 0;
}

.control-group .slider-container select {
    padding: 0.4rem 0.6rem;
    font-size: 0.8rem;
    flex-shrink: 0;
}

.probe-info-overlay {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background: rgba(var(--bg-color-rgb, 13, 15, 38), 0.85); /* Use the new RGB variable */
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: 8px; /* Consistent with other elements */
    padding: 0.75rem 1rem; /* Decent padding */
    font-size: 0.85rem;
    line-height: 1.5;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px); /* For Safari */
    z-index: 100; /* Ensure it's above the canvas */
    pointer-events: none; /* So it doesn't interfere with mouse events on canvas */
    max-width: calc(100% - 20px); /* Prevent overflow from its container */
    box-shadow: 0 4px 15px rgba(0,0,0,0.2); /* Subtle shadow */
}

.probe-info-overlay.hidden {
    display: none !important;
}

.cauchy-info-overlay {
    position: absolute;
    bottom: 10px;
    right: 10px; /* Typically on the other side */
    background: rgba(var(--bg-color-rgb, 13, 15, 38), 0.85);
    color: var(--accent-yellow); /* Use an accent for highlight */
    border: 1px solid var(--accent-yellow);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    font-size: 0.85rem;
    line-height: 1.5;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 100;
    pointer-events: none;
    max-width: calc(100% - 70px); /* Avoid overlap with probe if both visible */
    text-align: left;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.cauchy-info-overlay.hidden {
    display: none !important;
}

.slider-pair-row {
    display: flex;
    flex-direction: row;
    gap: 2rem; /* Match the main input-controls gap */
    align-items: flex-start; /* Align items to the start of the cross axis */
}

.slider-pair-row > .control-group {
    flex: 1; /* Each control group takes equal width */
    min-width: 0; /* Allow shrinking in flex context */
}

/* Custom Checkbox Styling */
.control-group label input[type="checkbox"] {
    opacity: 0; /* Hide the default checkbox */
    position: absolute;
    width: 0;
    height: 0;
}

.control-group label {
    position: relative; /* For positioning pseudo-elements if needed, and for clickability */
    cursor: pointer;
    user-select: none; /* Prevent text selection on click */
    display: flex; /* Use flex for alignment */
    align-items: center; /* Vertically align custom box and text */
    /* font-size: 1rem; font-weight: 500; (already from .control-group label, but ensure it applies well) */
}

/* The custom checkbox box */
.control-group label .custom-checkbox-visual {
    display: inline-block;
    width: 18px;
    height: 18px;
    background-color: rgba(var(--bg-color-rgb), 0.3);
    border: 1px solid var(--border-color);
    box-shadow: none; /* Ensure no default box shadow */
    border-radius: 4px;
    margin-right: 0.5rem; /* Space between custom box and label text (was 0.25rem, prompt implies general .control-group label styling for color) */
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    flex-shrink: 0; /* Prevent shrinking if label text is long */
    position: relative; /* For the checkmark */
}

/* Checkmark style (using an ::after pseudo-element on the visual span) */
.control-group label .custom-checkbox-visual::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 1px;
    width: 4px;
    height: 9px;
    border: solid var(--text-color); /* Initial border color, changes to #fff when checked */
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0.5); /* Initial state: small and rotated */
    opacity: 0; /* Initial state: invisible */
    transition: transform 0.2s ease-out, opacity 0.2s ease-out; /* Smooth transition for pop effect */
}

/* When the real checkbox is checked, style the custom one */
.control-group label input[type="checkbox"]:checked + .custom-checkbox-visual {
    background-color: var(--accent-purple);
    border-color: var(--accent-purple);
}

/* Show the checkmark when checked and change its color */
.control-group label input[type="checkbox"]:checked + .custom-checkbox-visual::after {
    border-color: #fff; /* White checkmark on accent background */
    transform: rotate(45deg) scale(1); /* Final state: full size */
    opacity: 1; /* Final state: visible */
}

/* Focus style for accessibility (applied to the custom visual when the hidden input has focus) */
.control-group label input[type="checkbox"]:focus + .custom-checkbox-visual {
    box-shadow: 0 0 0 3px var(--glow-color); /* Consistent glow */
    border-color: var(--accent-purple); /* Optionally make border match glow on focus */
}

/* Hover style on the custom box */
.control-group label:hover .custom-checkbox-visual {
    border-color: var(--accent-purple); /* Highlight on hover */
    /* box-shadow: 0 0 0 2px rgba(var(--glow-color), 0.3); /* Optional subtle glow on hover */
}

#polynomial_coeffs_container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem; /* Space between each coefficient's row */
    padding-top: 0.5rem; /* Add some space above the first coefficient */
}

.polynomial-coeff-row {
    display: flex;
    flex-direction: row; /* Re and Im parts side-by-side */
    gap: 1.5rem;         /* Space between Re and Im control groups */
    align-items: flex-start; /* Align to the top */
}

.polynomial-coeff-row > .control-group {
    flex: 1; /* Each part (Re/Im) takes equal space */
    min-width: 0; /* Allow shrinking in flex context */
    /* Styles for .control-group (gap, etc.) are already global */
}

/* Specific styles for polynomial controls for compactness */
.polynomial-coeff-row .control-group label {
    font-size: 0.85rem; /* Retains its specific size */
    /* If output is NOT in label, space-between might not be ideal. */
    /* For poly, output is a sibling to label, so this won't push output to right. */
    justify-content: flex-start; /* Align label text to the start */
    color: var(--text-secondary-color); /* Ensure color is inherited or set */
}

/* Style for the output that is a sibling of the label in polynomial controls */
.polynomial-coeff-row .control-group .slider-value-output {
    margin-left: 0; /* Override the auto margin */
    margin-bottom: 0.25rem; /* Space it above the slider */
    display: block; /* Make it block to sit on its own line */
    text-align: left; /* Align text to the left */
    padding: 0.1rem 0; /* Minimal padding */
    background-color: transparent; /* No background for this specific output */
    min-width: unset; /* Unset min-width */
}

.mobius-coeff-row {
    display: flex;
    flex-direction: row; /* Re and Im parts side-by-side */
    gap: 1.5rem;         /* Space between Re and Im control groups */
    align-items: flex-start; /* Align to the top */
}

.mobius-coeff-row > .control-group {
    flex: 1; /* Each part (Re/Im) takes equal space */
    min-width: 0; /* Allow shrinking in flex context */
}

/* Specific styles for Mobius controls for consistency with polynomial */
.mobius-coeff-row .control-group label {
    font-size: 0.85rem; /* Retains its specific size */
    justify-content: flex-start; /* Align label text to the start */
    color: var(--text-secondary-color); /* Ensure color is inherited or set */
}

/* This assumes the <output> is part of the <label> for Mobius, unlike polynomial */
/* If output is part of label: .mobius-coeff-row .control-group label > output */
/* If output is a sibling (like poly): .mobius-coeff-row .control-group .slider-value-output */
/* The HTML structure used output inside label, so this should be fine: */
.mobius-coeff-row .control-group label > output {
    margin-left: 0.5rem; /* Space between "Re(a):" and "1.0" */
    /* Other output styles are inherited or default */
}


.mobius-coeff-row .control-group input[type="range"] {
    height: 6px;
}

.mobius-coeff-row .control-group input[type="range"]::-webkit-slider-thumb {
    width: 18px;
    height: 18px;
}

.mobius-coeff-row .control-group .slider-container {
    gap: 0.5rem; /* More compact gap for slider, button, select */
}

.mobius-coeff-row .control-group button {
    padding: 0.3rem 0.5rem;
    font-size: 0.75rem;
}

.mobius-coeff-row .control-group select {
    padding: 0.3rem 0.5rem;
    font-size: 0.75rem;
}


.polynomial-coeff-row .control-group input[type="range"] {
    height: 6px;
}

.polynomial-coeff-row .control-group input[type="range"]::-webkit-slider-thumb {
    width: 18px;
    height: 18px;
    /* General thumb styles (color, border) will apply */
}

.polynomial-coeff-row .control-group .slider-container {
    gap: 0.5rem; /* More compact gap for slider, button, select */
}

.polynomial-coeff-row .control-group button {
    padding: 0.3rem 0.5rem;
    font-size: 0.75rem;
}

.polynomial-coeff-row .control-group select {
    padding: 0.3rem 0.5rem;
    font-size: 0.75rem;
}

.small-number-input {
    background-color: rgba(var(--bg-color-rgb), 0.3);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    padding: 0.5rem; /* 8px */
    border-radius: 6px;
    width: 70px;
    box-sizing: border-box;
    font-family: var(--font-family);
    font-size: 0.85rem;
    text-align: center;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

@media (max-width: 960px) {
    #controls_options_section {
        flex-direction: column;
        align-items: stretch;
    }
    /* Note: #function-controls-panel and #visualization-options-panel height remains 260px for now */
}

/* Spacing for Sphere View Buttons */
#sphere_view_controls_div > div:last-child {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem; /* Space below the label */
}

.small-number-input:focus {
    outline: none;
    border-color: var(--accent-purple);
    box-shadow: 0 0 0 3px var(--glow-color);
}

/* Explicitly ensure pointer events are enabled for these inputs */
#taylor_series_custom_center_re_input,
#taylor_series_custom_center_im_input {
    pointer-events: auto !important;
    z-index: 10; /* Ensure they are not hidden behind other panel elements */
}

/* --- Taylor Series Panel Styling --- */
.taylor-series-panel {
    background: rgba(40, 45, 60, 0.85); /* Slightly darker, more sophisticated background */
    border-radius: 8px;
    padding: 18px;
    margin-top: 15px;
    border: 1px solid rgba(100, 110, 130, 0.5);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease-in-out;
}

.taylor-series-panel:hover {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}

.taylor-series-control-group {
    margin-bottom: 18px;
    padding: 12px;
    background: rgba(45, 50, 65, 0.7); /* Subtle background for groups */
    border-radius: 6px;
    border: 1px solid rgba(80, 90, 110, 0.4);
}

.taylor-series-control-group:last-child {
    margin-bottom: 0;
}

.taylor-series-label,
.taylor-series-checkbox-label,
.taylor-series-input-label {
    display: block; /* Ensure labels take full width for alignment */
    color: #d0d8e8; /* Lighter text for contrast */
    font-size: 0.9rem;
    font-weight: 500; /* Slightly bolder labels */
    margin-bottom: 8px;
    transition: color 0.2s ease;
}

.taylor-series-panel:hover .taylor-series-label {
    /* color: #e0e8f8; Optional: slightly brighten label on panel hover */
}

/* Specific for checkbox label to align with custom checkbox */
.taylor-series-checkbox-label {
    position: relative;
    padding-left: 28px; /* Space for custom checkbox */
    cursor: pointer;
    display: flex; /* Align checkbox and text nicely */
    align-items: center;
    min-height: 22px; /* Ensure clickable area */
}

.taylor-series-slider {
    width: 100%;
    appearance: none; /* Remove default styling */
    -webkit-appearance: none;
    height: 8px;
    background: rgba(0,0,0,0.3); /* Darker track */
    border-radius: 4px;
    outline: none;
    transition: background 0.3s ease;
}

.taylor-series-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    background: #82aaff; /* Accent color for thumb */
    border-radius: 50%;
    border: 2px solid #fff;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.2s ease;
    box-shadow: 0 0 5px rgba(130, 170, 255, 0.5);
}

.taylor-series-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: #82aaff;
    border-radius: 50%;
    border: 2px solid #fff;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.2s ease;
    box-shadow: 0 0 5px rgba(130, 170, 255, 0.5);
}

.taylor-series-slider:hover::-webkit-slider-thumb {
    background: #9ac0ff;
    transform: scale(1.1);
}
.taylor-series-slider:hover::-moz-range-thumb {
    background: #9ac0ff;
    transform: scale(1.1);
}
.taylor-series-slider:active::-webkit-slider-thumb {
    background: #6a9bff;
    transform: scale(1.2);
}
.taylor-series-slider:active::-moz-range-thumb {
    background: #6a9bff;
    transform: scale(1.2);
}


/* Custom Checkbox for Taylor Series Panel */
.taylor-series-checkbox {
    opacity: 0; /* Hide original checkbox */
    width: 0;
    height: 0;
    position: absolute;
}

.taylor-series-checkbox-label .custom-checkbox-visual {
    /* Use existing custom checkbox visual if it's globally styled,
       or define a new one here if needed for Taylor series specifically.
       Assuming .custom-checkbox-visual is already defined globally.
       If not, here's a basic version: */
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 18px;
    width: 18px;
    background-color: rgba(0,0,0,0.2);
    border: 1px solid rgba(120,130,150,0.7);
    border-radius: 4px;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.taylor-series-checkbox-label:hover .custom-checkbox-visual {
    border-color: #82aaff;
}

.taylor-series-checkbox:checked + .custom-checkbox-visual {
    background-color: #82aaff;
    border-color: #7095e0;
}

.taylor-series-checkbox:checked + .custom-checkbox-visual::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Text Inputs for Taylor Series Panel */
.taylor-series-text-input {
    width: calc(50% - 10px); /* Adjust width as they are inline */
    padding: 8px 10px;
    background-color: rgba(0,0,0,0.25);
    border: 1px solid rgba(100, 110, 130, 0.6);
    border-radius: 4px;
    color: #e0e8f8;
    font-size: 0.85rem;
    transition: border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}

.taylor-series-text-input:focus {
    background-color: rgba(0,0,0,0.3);
    border-color: #82aaff; /* Accent color on focus */
    box-shadow: 0 0 8px rgba(130, 170, 255, 0.3);
    outline: none;
}

.taylor-series-input-group {
    display: flex;
    justify-content: space-between; /* Space out Re and Im inputs */
}

.taylor-series-input-group .taylor-series-input-label {
    width: auto; /* Labels for Re/Im inputs should not be full width */
    margin-right: 5px; /* Space between label and input if they were on same line, but they are not */
}

/* Styling for the input groups (Re and Im parts) if they have individual labels */
.taylor-series-input-group > label[for*="re_input"],
.taylor-series-input-group > label[for*="im_input"] {
    /* This selector might be too broad if structure changes.
       The HTML has <label>Re(z0): <input></label> <label>Im(z0): <input></label>
       So, the .taylor-series-input-label class on the label is better.
    */
}

.taylor-series-input-group .small-number-input { /* This is the existing class on the inputs */
    width: auto; /* Let them size based on content or a fixed small width */
    flex-grow: 1; /* Allow them to take available space within their parent label if needed */
}

/* Adjust spacing for the specific Re/Im input structure if they are side-by-side */
#taylor_series_custom_center_inputs_div label { /* Target labels within the Re/Im input div */
    display: flex;
    flex-direction: column; /* Stack label text above input */
    align-items: flex-start;
    width: 48%; /* Each takes roughly half the space */
}
#taylor_series_custom_center_inputs_div label .taylor-series-text-input {
    width: 100%; /* Input takes full width of its label container */
}