html, body {
    height: 100%; /* Ensure html and body take full viewport height */
}

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --bg-color: #222831; /* Dark Grayish Blue */
    --text-color: #eeeeee; /* Very Light Gray */
    --accent-color: #00adb5; /* Vibrant Teal/Cyan */
    --border-color: var(--accent-color);
    --hover-color: #00cdd7; /* Lighter Teal/Cyan for hover */
    --active-color: #009fa7; /* Slightly darker Teal/Cyan for active */
    --shadow: 3px 3px 0px #007a7f; /* Darker accent color for shadow, not black */
    --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --radius: 0;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
    /* RGB versions for opacity control */
    --accent-color-rgb: 0, 173, 181;
    --text-color-rgb: 238, 238, 238;
}

body {
    font-family: var(--font-mono);
    background-color: var(--bg-color);
    /* Vibrant accent dot pattern on dark bg */
    background-image: radial-gradient(rgba(var(--accent-color-rgb), 0.3) 1px, transparent 1px);
    background-size: 25px 25px;
    color: var(--text-color);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    /* Ensure smooth transition for overflow property if ever needed */
    transition: overflow 0.3s ease;
    display: flex; /* Make body a flex container */
    flex-direction: column; /* Stack children (header, main) vertically */
    animation: scrollBackground 60s linear infinite; /* Added animation */
}

@keyframes scrollBackground { /* Animation for body background */
    0% { background-position: 0 0; }
    100% { background-position: 50px 50px; } /* Scrolls by two pattern units of the new size */
}

.body-no-scroll {
    overflow: hidden;
}

/* Layout */
header {
    background-color: var(--bg-color);
    /* Subtle light text lines for header pattern on dark bg */
    background-image: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 10px,
        rgba(var(--text-color-rgb), 0.03) 10px,
        rgba(var(--text-color-rgb), 0.03) 20px
    );
    border-bottom: 2px solid var(--border-color);
    padding: 1.5rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 10;
}

h1 {
    font-size: 1.5rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -0.05em;
}

.home-link {
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
    display: inline-block;
}

.home-link:hover {
    opacity: 1;
}

.home-link:hover h1 {
    transform: translateY(-3px) translateX(-3px);
    text-shadow: 2px 2px 0px rgba(var(--accent-color-rgb), 0.5);
    color: var(--hover-color);
}

h2 {
    font-size: 1.25rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 1rem;
    letter-spacing: -0.05em;
}

h3 {
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
    letter-spacing: -0.05em;
}

main {
    padding: 2rem;
    display: flex; /* Use flex to center its content */
    flex-direction: column; /* Stack .container vertically if other elements were added */
    align-items: center; /* Center .container horizontally */
    justify-content: center; /* Center .container vertically */
    flex-grow: 1; /* Allow main to take up available vertical space in body */
}

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

/* Navigation */
nav select {
    padding: 0.75rem 1rem;
    border: 2px solid var(--border-color);
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-mono);
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    outline: none;
    transition: var(--transition);
    cursor: pointer;
    min-width: 200px;
    appearance: none;
    /* Updated SVG color to light text color for dark theme */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23eeeeee'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1rem;
    padding-right: 2.5rem;
}

nav select:focus {
    box-shadow: var(--shadow);
    transform: translate(-2px, -2px);
}

/* Visualization Container */
#visualization-container {
    background-color: var(--bg-color);
    /* Accent cross-hatch pattern, adjusted for dark bg */
    background-image: repeating-linear-gradient(-45deg, rgba(var(--accent-color-rgb), 0.07), rgba(var(--accent-color-rgb), 0.07) 1px, transparent 1px, transparent 10px),
                      repeating-linear-gradient(45deg, rgba(var(--accent-color-rgb), 0.07), rgba(var(--accent-color-rgb), 0.07) 1px, transparent 1px, transparent 10px);
    background-size: 20px 20px;
    border: 2px solid var(--border-color);
    padding: 2rem;
    min-height: 500px; /* Keep a min-height for desktop content */
    transition: var(--transition);
    /* 3D Box Effect */
    box-shadow: 
        5px 5px 0px var(--border-color),
        8px 8px 10px rgba(0,0,0,0.15);
}

.visualization-section {
    display: none;
    animation: fadeIn 0.3s ease-in-out;
}

.visualization-section.active {
    display: block;
}

#welcome-screen.active {
    display: flex !important; /* Ensure flex display for centering, overriding generic .active if necessary */
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

#welcome-screen {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 4rem 2rem;
    min-height: 400px;
}

#welcome-screen h2 {
    margin-bottom: 1.5rem;
    font-size: 3rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    color: var(--accent-color);
    text-shadow: /* Reconfigured for dark theme - removed black shadow */
        1px 1px 0px #006064, /* Darker accent for definition */
        2px 2px 3px rgba(var(--accent-color-rgb), 0.4),
        0 0 10px rgba(var(--accent-color-rgb), 0.2);
}

#welcome-screen p {
    font-size: 1.25rem;
    max-width: 600px;
    margin: 0 auto;
    text-transform: none;
    color: var(--text-color); /* Ensure good contrast on dark bg */
    line-height: 1.8;
}

/* Controls */
.controls {
    margin: 1.5rem 0;
    background-color: var(--bg-color);
    /* Accent cross-hatch pattern */
    background-image: repeating-linear-gradient(-45deg, rgba(var(--accent-color-rgb), 0.07), rgba(var(--accent-color-rgb), 0.07) 1px, transparent 1px, transparent 10px),
                      repeating-linear-gradient(45deg, rgba(var(--accent-color-rgb), 0.07), rgba(var(--accent-color-rgb), 0.07) 1px, transparent 1px, transparent 10px);
    background-size: 20px 20px;
    padding: 1.5rem;
    border: 2px solid var(--border-color);
}

.input-group {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

input, select, button {
    padding: 0.75rem 1rem;
    border: 2px solid var(--border-color);
    font-family: var(--font-mono);
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    transition: var(--transition);
    color: var(--text-color);
    background-color: var(--bg-color);
}

input, select {
    flex: 1;
    min-width: 120px;
}

input:focus, select:focus {
    outline: none;
    box-shadow: var(--shadow);
    transform: translate(-2px, -2px);
}

/* Style for input placeholder text - making it more direct */
input::placeholder {
    color: var(--text-color);
    opacity: 0.7; /* Slight dimming for placeholder feel */
}

input::-ms-input-placeholder { /* Edge */
    color: var(--text-color);
    opacity: 0.7;
}

input::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color: var(--text-color);
    opacity: 0.7;
}

/* Attempt to style dropdown options */
select option {
    background-color: var(--bg-color);
    color: var(--text-color);
}

/* Styling for select elements within controls for specificity */
.controls select,
.controls input[type="text"],
.controls input[type="number"] {
    color: var(--text-color);
    background-color: var(--bg-color);
    border: 2px solid var(--border-color);
}

button {
    background-color: var(--bg-color);
    color: var(--text-color);
    border: 2px solid var(--border-color);
    cursor: pointer;
    padding: 0.75rem 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-width: 120px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

button:hover {
    background-color: var(--hover-color);
    box-shadow: var(--shadow);
    transform: translate(-2px, -2px);
}

button:active {
    transform: translate(0, 0);
    box-shadow: none;
}

button:disabled {
    background-color: #393e46; /* Darker gray, distinct from main dark bg */
    border-color: #4a4e52;    /* Slightly lighter dark gray border */
    color: #6c757d;           /* Muted light gray text */
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Stack Visualization */
.stack-display {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 0.75rem;
    min-height: 300px;
    padding: 1.5rem;
    background-color: var(--bg-color);
    /* Accent cross-hatch pattern */
    background-image: repeating-linear-gradient(-45deg, rgba(var(--accent-color-rgb), 0.07), rgba(var(--accent-color-rgb), 0.07) 1px, transparent 1px, transparent 10px),
                      repeating-linear-gradient(45deg, rgba(var(--accent-color-rgb), 0.07), rgba(var(--accent-color-rgb), 0.07) 1px, transparent 1px, transparent 10px);
    background-size: 20px 20px;
    border: 2px solid var(--border-color);
}

.stack-item {
    width: 100%;
    max-width: 300px;
    padding: 1rem;
    background-color: var(--bg-color);
    color: var(--text-color);
    text-align: center;
    border: 2px solid var(--border-color);
    font-weight: 600;
    transition: var(--transition);
}

.stack-item.highlight {
    background-color: var(--hover-color);
    box-shadow: var(--shadow);
    transform: translate(-2px, -2px);
}

/* Queue Visualization */
.queue-display {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    overflow-x: auto;
    min-height: 120px;
    padding: 1.5rem;
    background-color: var(--bg-color);
    /* Accent cross-hatch pattern */
    background-image: repeating-linear-gradient(-45deg, rgba(var(--accent-color-rgb), 0.07), rgba(var(--accent-color-rgb), 0.07) 1px, transparent 1px, transparent 10px),
                      repeating-linear-gradient(45deg, rgba(var(--accent-color-rgb), 0.07), rgba(var(--accent-color-rgb), 0.07) 1px, transparent 1px, transparent 10px);
    background-size: 20px 20px;
    border: 2px solid var(--border-color);
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) var(--bg-color);
}

.queue-display::-webkit-scrollbar {
    height: 8px;
}

.queue-display::-webkit-scrollbar-track {
    background: var(--bg-color);
    border: 1px solid var(--border-color);
}

.queue-display::-webkit-scrollbar-thumb {
    background-color: var(--border-color);
}

.queue-item {
    min-width: 80px;
    height: 80px;
    padding: 0.75rem;
    background-color: var(--bg-color);
    color: var(--text-color);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--border-color);
    font-weight: 600;
    flex-shrink: 0;
    transition: var(--transition);
}

.queue-item.highlight {
    background-color: var(--hover-color);
    box-shadow: var(--shadow);
    transform: translate(-2px, -2px);
}

/* Linked List Visualization */
.linkedlist-display {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1.5rem;
    overflow-x: auto;
    min-height: 120px;
    padding: 1.5rem;
    background-color: var(--bg-color);
    /* Accent cross-hatch pattern */
    background-image: repeating-linear-gradient(-45deg, rgba(var(--accent-color-rgb), 0.07), rgba(var(--accent-color-rgb), 0.07) 1px, transparent 1px, transparent 10px),
                      repeating-linear-gradient(45deg, rgba(var(--accent-color-rgb), 0.07), rgba(var(--accent-color-rgb), 0.07) 1px, transparent 1px, transparent 10px);
    background-size: 20px 20px;
    border: 2px solid var(--border-color);
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) var(--bg-color);
}

.linkedlist-display::-webkit-scrollbar {
    height: 8px;
}

.linkedlist-display::-webkit-scrollbar-track {
    background: var(--bg-color);
    border: 1px solid var(--border-color);
}

.linkedlist-display::-webkit-scrollbar-thumb {
    background-color: var(--border-color);
}

.node {
    position: relative;
    min-width: 80px;
    height: 80px;
    background-color: var(--bg-color);
    color: var(--text-color);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--border-color);
    font-weight: 600;
    flex-shrink: 0;
    transition: var(--transition);
}

.node.highlight {
    background-color: var(--hover-color);
    box-shadow: var(--shadow);
    transform: translate(-2px, -2px);
}

.node::after {
    content: '→';
    position: absolute;
    right: -25px;
    font-size: 24px;
    color: var(--text-color);
}

.node:last-child::after {
    content: '';
}

/* BST Visualization */
.bst-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 300px;
    padding: 1.5rem;
    background-color: var(--bg-color);
    /* Accent cross-hatch pattern */
    background-image: repeating-linear-gradient(-45deg, rgba(var(--accent-color-rgb), 0.07), rgba(var(--accent-color-rgb), 0.07) 1px, transparent 1px, transparent 10px),
                      repeating-linear-gradient(45deg, rgba(var(--accent-color-rgb), 0.07), rgba(var(--accent-color-rgb), 0.07) 1px, transparent 1px, transparent 10px);
    background-size: 20px 20px;
    border: 2px solid var(--border-color);
}

.tree-node {
    position: relative;
    width: 60px;
    height: 60px;
    margin: 0.5rem;
    background-color: var(--bg-color);
    color: var(--text-color);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--border-color);
    font-weight: 600;
    transition: var(--transition);
}

.tree-node.highlight {
    background-color: var(--hover-color);
    box-shadow: var(--shadow);
    transform: translate(-2px, -2px);
}

.tree-level {
    display: flex;
    justify-content: center;
    margin: 0.5rem 0;
}

/* Sorting Visualization */
.sorting-display {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 2px;
    min-height: 300px;
    padding: 1.5rem;
    background-color: var(--bg-color);
    /* Accent cross-hatch pattern */
    background-image: repeating-linear-gradient(-45deg, rgba(var(--accent-color-rgb), 0.07), rgba(var(--accent-color-rgb), 0.07) 1px, transparent 1px, transparent 10px),
                      repeating-linear-gradient(45deg, rgba(var(--accent-color-rgb), 0.07), rgba(var(--accent-color-rgb), 0.07) 1px, transparent 1px, transparent 10px);
    background-size: 20px 20px;
    border: 2px solid var(--border-color);
}

.bar {
    width: 20px;
    background-color: var(--bg-color);
    border: 2px solid var(--border-color);
    transition: var(--transition);
}

.bar.highlight {
    background-color: var(--hover-color);
    box-shadow: var(--shadow);
    transform: translateY(-2px);
}

.bar.sorted {
    background-color: var(--hover-color);
    border-color: var(--text-color);
}

/* Info Section */
.info-section {
    margin-top: 1.5rem;
    padding: 1.5rem;
    background-color: var(--bg-color);
    /* Accent cross-hatch pattern */
    background-image: repeating-linear-gradient(-45deg, rgba(var(--accent-color-rgb), 0.07), rgba(var(--accent-color-rgb), 0.07) 1px, transparent 1px, transparent 10px),
                      repeating-linear-gradient(45deg, rgba(var(--accent-color-rgb), 0.07), rgba(var(--accent-color-rgb), 0.07) 1px, transparent 1px, transparent 10px);
    background-size: 20px 20px;
    border: 2px solid var(--border-color);
}

.operations-list {
    list-style-type: none;
    margin-top: 0.75rem;
}

.operations-list li {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.875rem;
    text-transform: none;
}

.operations-list li:last-child {
    border-bottom: none;
}

.algorithm-info {
    margin-top: 0.75rem;
    line-height: 1.7;
    font-size: 0.875rem;
    text-transform: none;
}

/* Description text */
.description {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    text-transform: none;
}

/* Media Queries */
@media (max-width: 768px) {
    header {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
        padding: 1rem;
        position: static; /* Allow welcome screen to potentially scroll over it if needed, or simplify layout */
    }

    h1 {
        font-size: 1.3rem; /* Slightly smaller main title */
    }

    h2 {
        font-size: 1.1rem; /* Smaller section titles */
    }

    h3 {
        font-size: 0.9rem; /* Smaller sub-titles */
    }

    main {
        padding: 0; /* CHANGED from 1rem to 0 for full page coverage */
        display: flex; /* Allow child to grow */
        flex-direction: column; /* Stack children */
        flex-grow: 1; /* Allow main to grow if body is flex */
    }

    #visualization-container {
        padding: 1rem; /* Reduced padding */
        min-height: auto; /* Allow height to be more flexible */
        display: flex; /* Allow child to grow */
        flex-direction: column; /* Stack children */
        flex-grow: 1; /* Make this container grow to fill main */
    }

    .controls {
        padding: 1rem; /* Reduced padding */
    }

    .input-group {
        flex-direction: column;
        gap: 0.75rem; /* Slightly reduced gap */
    }

    input, select, button {
        width: 100%;
        font-size: 0.8rem; /* Smaller font for controls */
        padding: 0.65rem 0.8rem; /* Adjusted padding for controls */
    }

    nav select {
        width: 100%;
        min-width: unset; /* Remove min-width on mobile */
        font-size: 0.8rem;
    }

    #welcome-screen {
        padding: 2rem 1rem; /* Adjusted padding */
        /* flex-grow: 1; is on #welcome-screen.active and its parents, should fill space */
        /* justify-content: center; & align-items: center; from base style will center content */
    }

    #welcome-screen h2 {
        font-size: 2rem; /* Slightly larger welcome heading for mobile */
        text-shadow: /* Simplified shadow for mobile dark theme - removed black */
            1px 1px 0px #006064, /* Darker accent for definition */
            2px 2px 3px rgba(var(--accent-color-rgb), 0.3);
    }

    #welcome-screen p {
        font-size: 1.1rem; /* Slightly larger welcome paragraph for mobile */
    }

    /* Adjust padding for visualization display areas */
    .stack-display,
    .queue-display,
    .linkedlist-display,
    .bst-display { /* Exclude .sorting-display from this specific min-height: 0 rule initially if it's behaving okay */
        padding: 1rem;
        min-height: 0; /* Crucial for allowing flex-grow to work against content-based minimums */
        flex-grow: 1; 
        overflow: auto; 
    }
    
    .sorting-display { /* Keep its existing flex-grow and other properties */
        padding: 1rem;
        min-height: 200px; /* Restore or ensure a reasonable min-height for sorting */
        flex-grow: 1;
        overflow: auto;
    }
    
    .info-section {
        padding: 1rem;
        min-height: auto; /* Allow height to be more flexible */
        flex-shrink: 0; /* Prevent info section from shrinking if display area grows a lot */
    }

    .queue-item,
    .node {
        min-width: 60px; /* Smaller items for horizontal lists */
        height: 60px;
        font-size: 0.75rem;
    }

    .node::after { /* Adjust arrow position for smaller nodes */
        right: -20px;
        font-size: 20px;
    }

    .tree-node {
        width: 45px; /* Smaller BST nodes */
        height: 45px;
        font-size: 0.7rem;
        margin: 0.3rem;
    }

    .description {
        font-size: 0.8rem;
    }

    .operations-list li {
        font-size: 0.8rem;
        padding: 0.5rem 0;
    }

    .algorithm-info {
        font-size: 0.8rem;
    }

    /* Sorting specific adjustments */
    #sorting-controls .input-group {
        gap: 0.5rem; /* Tighter gap for sorting controls */
    }
    .bar {
        width: 10px; /* Narrower bars for sorting on mobile */
    }

    .visualization-section.active {
        display: flex; /* Change from block to flex */
        flex-direction: column; /* Stack its children (controls, display, info) */
        flex-grow: 1; /* Allow the active section to fill #visualization-container */
        /* animation: fadeIn 0.3s ease-in-out; is already on .visualization-section */
    }

    #welcome-screen.active {
        display: flex !important; /* Ensure flex display for centering, overriding generic .active if necessary */
        flex-direction: column; /* Already there, but good to be explicit */
        justify-content: center; /* Already there */
        flex-grow: 1; /* Already there */
    }
}