body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #000;
    font-family: 'Segoe UI', sans-serif;
    color: white;
    box-sizing: border-box;
}

*, *:before, *:after {
    box-sizing: inherit;
}

/* --- UI Container & Layout --- */
#ui-container {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 0; /* No gap, panels touch */
    z-index: 100;
    pointer-events: none; /* Allow clicks to pass through to canvas */
}

/* Make children interactive */
#ui-container > * {
    pointer-events: auto;
}

/* Floating Plot */
.floating-plot {
    position: fixed;
    top: 20px;
    left: 20px;
    width: 260px;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    display: flex;
    flex-direction: column;
    gap: 5px;
    z-index: 110;
    transition: opacity 0.3s, transform 0.3s;
}

#plot-resize-handle {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 15px;
    height: 15px;
    cursor: se-resize;
    /* Curved gray bean style */
    border-bottom: 4px solid rgba(255, 255, 255, 0.3);
    border-right: 4px solid rgba(255, 255, 255, 0.3);
    border-bottom-right-radius: 8px;
    transition: border-color 0.2s;
}

#plot-resize-handle:hover {
    border-color: rgba(255, 255, 255, 0.8);
}

.floating-plot.hidden {
    opacity: 0;
    transform: translateY(-20px);
    pointer-events: none;
}

.plot-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    font-weight: 700;
    color: #4cc9f0;
    /* text-transform: uppercase; Removed to allow Greek letters */
    letter-spacing: 1px;
    margin-bottom: 5px;
}

.icon-btn-small {
    background: transparent;
    border: none;
    color: #aaa;
    cursor: pointer;
    padding: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s;
}

.icon-btn-small:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

/* Glassmorphism Base */
.glass-panel {
    background: rgba(15, 15, 25, 0.85);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-left: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: -5px 0 32px rgba(0,0,0,0.5);
}

/* --- Sidebar --- */
#sidebar {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px 5px 40px 5px; /* Increased bottom padding */
    width: 50px; 
    gap: 15px;
    flex-shrink: 0;
    height: 100%;
    border-radius: 0;
    z-index: 102;
    overflow: hidden;
    background: rgba(10, 10, 20, 0.95);
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    transition: width 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
}

#sidebar.hidden {
    width: 0;
    opacity: 0;
    padding: 0;
    border: none;
}

.divider-h {
    width: 80%;
    height: 1px;
    background: rgba(255, 255, 255, 0.2);
    margin: 5px 0;
}

/* --- Settings Panel --- */
#settings-panel {
    width: 300px;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* Transition for collapsing to the right */
    transition: width 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
    transform-origin: right center;
    border-radius: 0;
    z-index: 101;
}

#settings-panel.collapsed {
    width: 0;
    opacity: 0;
    transform: translateX(20px);
    border: none;
    margin: 0;
}

.panel-header {
    padding: 15px 20px;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0; /* Prevent header from shrinking */
}

.logo-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo-title h3 {
    margin: 0;
    font-size: 0.9rem; /* Smaller font to match collapsible header */
    font-weight: 700;
    color: #fff;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.panel-content {
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%; /* Ensure it fits within parent */
    box-sizing: border-box; /* Include padding in width */
    overflow-y: auto; /* Allow scrolling if needed */
    overflow-x: hidden; /* Prevent horizontal scroll */
}

/* --- Control Boxes --- */
.control-box {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 5px; /* Further reduced padding */
    display: flex;
    flex-direction: column;
    gap: 3px; /* Further reduced gap */
    width: 100%; /* Ensure it fits within parent */
    box-sizing: border-box; /* Include padding in width */
    margin-bottom: 2px; /* Reduced margin */
}

.box-header {
    font-size: 0.7rem; /* Smaller font */
    text-transform: uppercase;
    color: #888;
    font-weight: 700;
    letter-spacing: 1px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2px; /* Minimal margin */
}

/* Highlight Box (Redshift) */
.control-box.highlight-box {
    background: linear-gradient(135deg, rgba(76, 201, 240, 0.15), rgba(76, 201, 240, 0.02));
    border: 1px solid rgba(76, 201, 240, 0.3);
    box-shadow: 0 0 15px rgba(76, 201, 240, 0.1);
}

.control-box.highlight-box .box-header {
    color: #4cc9f0;
    font-size: 0.85rem;
}

/* Cosmology Box (Standard Box, Custom Inner Styles) */
.control-box.cosmology-box .box-header {
    color: #c77dff; /* Softer Purple */
}

.control-box.cosmology-box .math-label {
    color: #e0aaff; /* Softer Pink/Lilac */
}

.control-box.cosmology-box .value-display {
    color: #e0aaff;
}

/* Custom Slider Color for Cosmology */
.control-box.cosmology-box input[type=range] {
    background-image: linear-gradient(#e0aaff, #e0aaff);
}

/* Dev Box */
.control-box.dev-box {
    background: rgba(255, 200, 0, 0.05);
    border: 1px solid rgba(255, 200, 0, 0.3);
}

.control-box.dev-box .box-header {
    color: #ffcc00;
}

.sidebar-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 5px;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.sidebar-logo:hover {
    transform: scale(1.1);
}

.disclaimer-text {
    font-size: 0.75rem;
    color: #666;
    margin-top: 20px;
    padding: 0 5px;
    text-align: center;
    font-style: italic;
    line-height: 1.4;
}

/* --- Sliders --- */
.compact-slider-row {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 24px;
    width: 100%; /* Ensure full width */
}

.compact-slider-row label {
    width: 30px;
    font-size: 0.9rem;
    color: #ccc;
    flex-shrink: 0;
}

.compact-slider-row label.math-label {
    font-family: "Times New Roman", serif;
    font-style: italic;
    font-size: 1.2rem;
    color: #4cc9f0;
}

/* Full Width Slider Container */
.full-width-slider-container {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 5px;
}

.slider-label-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem; /* Smaller font */
    color: #ccc;
}

.full-width-slider-container input[type=range] {
    width: 100%;
    margin-top: 2px; /* Reduced margin */
}

.value-display {
    width: 50px; /* Increased width to prevent overflow for z=1100 */
    text-align: right;
    font-family: monospace;
    font-size: 0.8rem; /* Smaller font */
    color: #4cc9f0;
    flex-shrink: 0;
}

/* Thinner Custom Range Slider */
input[type=range] {
    -webkit-appearance: none;
    flex-grow: 1; /* Take remaining space */
    width: 0; /* Fix flexbox overflow issue */
    height: 2px; /* Thinner track */
    background: rgba(255,255,255,0.1);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
    background-image: linear-gradient(#4cc9f0, #4cc9f0);
    background-size: 0% 100%;
    background-repeat: no-repeat;
}

/* Special styling for Redshift Slider to gray out z > 5 */
/* z=5 is at ~25.6% from the right (Min=0). So 74.4% from left. */
/* Since it's RTL, Min(0) is Right. Max(3.04) is Left. */
/* The track background (unfilled part) is visible to the LEFT of the thumb (higher z). */
/* We want the track from z=5 (25% from right) to z=1100 (100% from right) to be gray/dark. */
/* Linear Gradient: To Left. 
   0% (Right) -> 25.6% (z=5): Normal Track Color (rgba(255,255,255,0.1))
   25.6% -> 100% (Left): Darker/Grayed Out (rgba(255,255,255,0.03))
*/
#z-slider {
    /* Track Gradient (Static) */
    background-color: transparent; /* Ensure color doesn't override */
    background-image: 
        /* Layer 1: Dynamic Fill (Blue) - Controlled by JS background-size */
        linear-gradient(#4cc9f0, #4cc9f0),
        /* Layer 2: Standard Track (z=0 to z=5) - Solid Gray */
        linear-gradient(rgba(255,255,255,0.15), rgba(255,255,255,0.15)),
        /* Layer 3: Optional Track (z=5 to z=1100) - Hatched Pattern */
        repeating-linear-gradient(
            -45deg,
            rgba(255,255,255,0.05),
            rgba(255,255,255,0.05) 2px,
            transparent 2px,
            transparent 6px
        );
    
    /* Initial Sizes: 
       Layer 1 (Fill): 0% width (dynamic)
       Layer 2 (Std Track): 25.6% width (fixed)
       Layer 3 (Opt Track): 74.4% width (fixed)
    */
    background-size: 0% 100%, 25.6% 100%, 74.4% 100%;
    background-repeat: no-repeat;
    /* Positions:
       Layer 1: Right (starts at z=0)
       Layer 2: Right (starts at z=0)
       Layer 3: Left (starts at z=1100)
    */
    background-position: right center, right center, left center;
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    background: #4cc9f0; /* Match slider color */
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 5px rgba(0,0,0,0.3);
    transition: transform 0.1s;
}

input[type=range]::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

/* Cosmology Box Specific Slider Colors */
.control-box.cosmology-box input[type=range]::-webkit-slider-thumb {
    background: #e0aaff;
}

/* RTL Slider (Redshift) */
input[type=range].slider-rtl {
    -webkit-appearance: none; /* Ensure standard appearance is removed */
    appearance: none;
    direction: rtl;
    background-position: right center; 
    height: 6px; /* Medium-thick track */
    border-radius: 3px;
    margin: 10px 0; /* Spacing */
    /* Gradient background: Filled part (colored) on the right (start), Empty part (transparent/dim) on the left */
    /* Since direction is RTL, the "filled" part (0 to value) is visually on the right */
    /* We use background-size to control the width of the filled part */
    background-image: linear-gradient(to left, #4cc9f0, #4cc9f0);
    background-repeat: no-repeat;
    background-color: rgba(255,255,255,0.1); /* Track color */
}

input[type=range].slider-rtl::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    background: #4cc9f0; /* Colored selector */
    cursor: pointer;
    box-sizing: border-box;
}

input[type=range].slider-rtl::-moz-range-thumb {
    width: 24px;
    height: 24px;
    background: #4cc9f0;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(76, 201, 240, 0.5);
    /* Moz range thumb is vertically centered by default usually, but let's check */
}

/* --- Buttons --- */
.button-row {
    display: flex;
    gap: 10px;
    margin-top: 5px;
}

button.icon-text-btn {
    flex: 1;
    background: rgba(76, 201, 240, 0.1);
    border: 1px solid rgba(76, 201, 240, 0.2);
    color: #4cc9f0;
    padding: 8px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.2s;
}

button.icon-text-btn:hover {
    background: rgba(76, 201, 240, 0.2);
    box-shadow: 0 0 10px rgba(76, 201, 240, 0.1);
}

button.icon-btn {
    background: transparent;
    border: none;
    color: #aaa;
    padding: 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

button.icon-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

button.icon-btn.active {
    color: #4cc9f0;
    background: rgba(76, 201, 240, 0.1);
}

button.secondary-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #aaa;
    font-size: 0.8rem;
    padding: 4px 8px; /* Thinner button */
    border-radius: 6px;
    width: 100%;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

button.secondary-btn:hover {
    border-color: #4cc9f0;
    color: #4cc9f0;
    background: rgba(76, 201, 240, 0.05);
}

/* --- Layer Checkboxes --- */
.layer-checkbox-container {
    display: flex;
    flex-direction: column; /* Stack vertically */
    gap: 8px;
    margin-top: 5px;
}

.layer-checkbox-item {
    display: flex;
    align-items: center;
    user-select: none;
    justify-content: space-between;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 4px;
    transition: background 0.2s;
    width: 100%; /* Full width */
    background: rgba(255, 255, 255, 0.03); /* Slight background to distinguish */
}

.layer-checkbox-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.layer-checkbox-item input {
    display: none;
}

.layer-checkbox-item .checkmark {
    width: 14px;
    height: 14px;
    border: 1px solid #4cc9f0;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    transition: all 0.2s;
    background: rgba(0, 0, 0, 0.3);
}

.layer-checkbox-item input:checked + .checkmark {
    background: #4cc9f0;
    color: #0b1120;
}

.layer-label-content {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #e0e0e0;
    font-size: 0.8rem;
}

.spacer-v {
    height: 15px;
    width: 100%;
}

/* --- Toggle Group (Segmented Control) --- */
.toggle-group-container {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 8px;
}

.toggle-group-label {
    font-size: 0.75rem;
    color: #ccc;
    font-weight: 400; /* Removed bold */
}

.toggle-group {
    display: flex;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    padding: 2px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.toggle-btn {
    flex: 1;
    background: transparent;
    border: none;
    color: #888;
    padding: 6px;
    font-size: 0.75rem;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s;
    font-weight: 500;
}

.toggle-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.05);
}

.toggle-btn.active {
    background: #4cc9f0;
    color: #0b1120;
    font-weight: 700;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* --- Toggle Switch --- */
.toggle-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
}

.toggle-label {
    font-size: 0.75rem;
    color: #ccc;
}

.switch {
    position: relative;
    display: inline-block;
    width: 28px;
    height: 16px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255,255,255,0.2);
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 12px;
    width: 12px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    transition: .4s;
}

input:checked + .slider {
    background-color: #4cc9f0;
}

input:checked + .slider:before {
    transform: translateX(12px);
}

.slider.round {
    border-radius: 16px;
}

.slider.round:before {
    border-radius: 50%;
}

canvas {
    display: block;
}

/* --- Icons (SVG Masks) --- */
.icon-mask {
    display: inline-block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    vertical-align: middle;
}

/* Icon Definitions */
.icon-info {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.5 7.75A.75.75 0 0 1 7.25 7h1a.75.75 0 0 1 .75.75v2.75h.25a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1 0-1.5h.25v-2h-.25a.75.75 0 0 1-.75-.75ZM8 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.5 7.75A.75.75 0 0 1 7.25 7h1a.75.75 0 0 1 .75.75v2.75h.25a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1 0-1.5h.25v-2h-.25a.75.75 0 0 1-.75-.75ZM8 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z'/%3E%3C/svg%3E");
}

.icon-play {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
}

.icon-pause {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='6' y='4' width='4' height='16'/%3E%3Crect x='14' y='4' width='4' height='16'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='6' y='4' width='4' height='16'/%3E%3Crect x='14' y='4' width='4' height='16'/%3E%3C/svg%3E");
}

.icon-reset {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8'/%3E%3Cpath d='M3 3v5h5'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8'/%3E%3Cpath d='M3 3v5h5'/%3E%3C/svg%3E");
}

.icon-density {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2L2 7l10 5 10-5-10-5z' fill='currentColor' stroke='none'/%3E%3Cpath d='M2 17l10 5 10-5M2 12l10 5 10-5'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2L2 7l10 5 10-5-10-5z' fill='currentColor' stroke='none'/%3E%3Cpath d='M2 17l10 5 10-5M2 12l10 5 10-5'/%3E%3C/svg%3E");
}

.icon-galaxies {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='3' fill='currentColor' stroke='none'/%3E%3Cellipse cx='12' cy='12' rx='10' ry='4' transform='rotate(-30 12 12)'/%3E%3Cellipse cx='12' cy='12' rx='10' ry='4' transform='rotate(30 12 12)'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='3' fill='currentColor' stroke='none'/%3E%3Cellipse cx='12' cy='12' rx='10' ry='4' transform='rotate(-30 12 12)'/%3E%3Cellipse cx='12' cy='12' rx='10' ry='4' transform='rotate(30 12 12)'/%3E%3C/svg%3E");
}

.icon-heatmap {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 4v10.54a4 4 0 1 1-4 0V4a2 2 0 0 1 4 0Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 4v10.54a4 4 0 1 1-4 0V4a2 2 0 0 1 4 0Z'/%3E%3C/svg%3E");
}

.icon-horizon {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='9' stroke-dasharray='4 2'/%3E%3Ccircle cx='12' cy='12' r='2' fill='currentColor' stroke='none'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='9' stroke-dasharray='4 2'/%3E%3Ccircle cx='12' cy='12' r='2' fill='currentColor' stroke='none'/%3E%3C/svg%3E");
}

.icon-rsd {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 3v18M8 21l4-4 4 4M8 3l4 4 4-4'/%3E%3Cpath d='M4 12h16' stroke-opacity='0.3'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 3v18M8 21l4-4 4 4M8 3l4 4 4-4'/%3E%3Cpath d='M4 12h16' stroke-opacity='0.3'/%3E%3C/svg%3E");
}

.icon-plot {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'/%3E%3Cpath d='M3 15h18M3 9h18M9 21V3M15 21V3'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'/%3E%3Cpath d='M3 15h18M3 9h18M9 21V3M15 21V3'/%3E%3C/svg%3E");
}

.icon-screenshot {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z'/%3E%3Ccircle cx='12' cy='13' r='4'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z'/%3E%3Ccircle cx='12' cy='13' r='4'/%3E%3C/svg%3E");
}

.icon-tour {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolygon points='10 8 16 12 10 16 10 8' fill='currentColor' stroke='none'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolygon points='10 8 16 12 10 16 10 8' fill='currentColor' stroke='none'/%3E%3C/svg%3E");
}

.icon-shuffle {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 3h5v5M4 20L21 3M21 16v5h-5M15 15l6 6M4 4l5 5'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 3h5v5M4 20L21 3M21 16v5h-5M15 15l6 6M4 4l5 5'/%3E%3C/svg%3E");
}

.icon-check {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

.icon-close {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E");
}

.icon-bao {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2a10 10 0 0 1 10 10'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2a10 10 0 0 1 10 10'/%3E%3C/svg%3E");
}

/* --- Utility Classes --- */
.icon-xs { width: 10px; height: 10px; }
.icon-sm { width: 14px; height: 14px; }
.icon-md { width: 16px; height: 16px; }
.icon-lg { width: 20px; height: 20px; }
.icon-xl { width: 24px; height: 24px; }

.text-white { color: #fff; }
.text-gray { color: #aaa; }

.w-full { width: 100%; }
.mb-sm { margin-bottom: 5px; }
.mt-sm { margin-top: 5px; }

.dev-stats-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: #aaa;
    margin-bottom: 5px;
    padding: 0 5px;
}

/* --- Info Bubbles & Tooltips --- */
.info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 6px;
    color: #666;
    cursor: help;
    position: relative;
    vertical-align: middle;
    transition: color 0.2s;
}

.info-icon::before {
    content: '';
    display: block;
    width: 12px;
    height: 12px;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.5 7.75A.75.75 0 0 1 7.25 7h1a.75.75 0 0 1 .75.75v2.75h.25a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1 0-1.5h.25v-2h-.25a.75.75 0 0 1-.75-.75ZM8 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.5 7.75A.75.75 0 0 1 7.25 7h1a.75.75 0 0 1 .75.75v2.75h.25a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1 0-1.5h.25v-2h-.25a.75.75 0 0 1-.75-.75ZM8 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.info-icon:hover {
    color: #4cc9f0;
}

/* Hide original tooltips as we use JS global tooltip now */
.tooltip {
    display: none;
}

.global-tooltip {
    position: fixed;
    visibility: hidden;
    opacity: 0;
    background-color: rgba(10, 10, 20, 0.95);
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 8px 12px;
    z-index: 9999; /* Very high z-index */
    font-size: 0.75rem;
    font-weight: normal;
    text-transform: none;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    pointer-events: none;
    transition: opacity 0.2s;
    max-width: 220px;
    width: max-content;
}

.global-tooltip.visible {
    visibility: visible;
    opacity: 1;
}

/* --- Plot Animation State --- */
.floating-plot.collapsing {
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.5s ease;
    opacity: 0;
    pointer-events: none;
    /* Transform will be set via JS */
}

/* Sidebar Button States */
#sidebar-plot-btn {
    transition: opacity 0.3s, transform 0.3s;
}

#sidebar-plot-btn.inactive {
    opacity: 0.3;
    transform: scale(0.8);
}

/* --- Cosmology Presets --- */
.preset-row {
    display: flex;
    gap: 5px;
    margin-bottom: 8px;
    justify-content: space-between;
}

.preset-btn {
    flex: 1;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(224, 170, 255, 0.3); /* Light purple border */
    color: #e0aaff;
    padding: 4px 0;
    font-size: 0.7rem;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s;
    text-align: center;
}

.preset-btn:hover {
    background: rgba(224, 170, 255, 0.15);
    color: #fff;
    border-color: #e0aaff;
}

.preset-btn:active {
    transform: translateY(1px);
}