:root {
    --clr-primary: #007bff;
    --clr-secondary: #ff4b9f;
    --clr-accent: plum; /* Updated to a lighter purple */
    --clr-background-main: aliceblue;
    --clr-primary-lighter: yellow;
    --clr-text-light: #fff;
}

body {
    font-family: 'Nunito', sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-color: var(--clr-background-main);
    color: var(--clr-text-dark);
}

nav {
    display: flex;
    align-items: center;
    background-color: var(--clr-primary);
    color: var(--clr-text-on-primary);
    padding: 10px 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

nav h1 {
    font-family: 'Rubik', sans-serif;
    font-size: 1.5em;
    margin: 0;
    flex-grow: 1;
    margin-left: 15px;
}

nav #school-logo {
    font-size: 2em;
}

nav button {
    background-color: var(--clr-primary-darker);
    color: var(--clr-text-on-primary);
    border: none;
    padding: 8px 15px;
    margin-left: 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9em;
    transition: background-color 0.2s ease;
}

nav button:hover {
    background-color: var(--clr-primary);
}

#run-btn {
    background-color: var(--clr-secondary);
    color: var(--clr-text-on-secondary);
}

#run-btn:hover {
    background-color: var(--clr-secondary-darker);
}

#next-btn {
    background-color: var(--clr-accent);
    color: var(--clr-text-on-primary);
}

#next-btn:hover {
    opacity: 0.85;
}

nav .icon-button {
    background: none;
    padding: 5px;
    min-width: auto;
}

nav .icon-button .material-icons {
    vertical-align: middle;
    color: var (--clr-text-on-primary);
}

#task-instruction {
    padding: 15px 20px;
    background-color: var(--clr-primary-lighter);
    border-bottom: 1px solid var(--clr-primary);
    font-size: 1.1em;
    font-weight: bold;
    color: var(--clr-primary);
}

#main-container {
    display: flex;
    flex-grow: 1;
    overflow: hidden;
    padding: 10px;
    gap: 10px;
}

#editor-container {
    display: flex;
    flex-direction: column;
    flex-basis: 60%;
    gap: 10px;
    overflow: hidden;
}

.editor-section {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    background-color: var(--clr-background-card);
    border: 1px solid var(--clr-border-light);
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    min-height: 0;
}

.editor-title {
    background-color: var(--clr-background-header);
    padding: 8px 12px;
    font-weight: bold;
    border-bottom: 1px solid var(--clr-border-light);
    border-radius: 4px 4px 0 0;
    font-size: 0.9em;
    color: var(--clr-text-dark);
}

.editor {
    flex-grow: 1;
    min-height: 100px;
}

#output-container {
    display: flex;
    flex-direction: column;
    flex-basis: 40%;
    background-color: var(--clr-background-card);
    border: 2px solid var(--clr-border-light); /* Ensure border is visible */
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); /* Slight shadow for better visibility */
    overflow: hidden; /* Prevent content overflow */
}

#output-header {
    font-size: 1.2em;
    margin: 0;
    padding: 10px 15px;
    background-color: var(--clr-background-header);
    border-bottom: 1px solid var(--clr-border-light);
    border-radius: 4px 4px 0 0;
    text-align: center;
    color: var(--clr-text-dark);
}

#output-slot {
    flex-grow: 1;
    border: none;
    width: 100%;
    background-color: var(--clr-background-main); /* Ensure background is visible */
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1); /* Add subtle inset shadow */
}

#menu-content {
    position: absolute;
    top: 60px;
    right: 20px;
    background: var(--clr-background-card);
    border: 1px solid var(--clr-border-light);
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 1000;
}

#menu-content div {
    padding: 5px 10px;
    cursor: pointer;
    margin-bottom: 5px;
    border-radius: 3px;
    text-align: center;
    font-weight: bold;
    transition: transform 0.2s ease, opacity 0.2s ease, color 0.2s ease;
    background-color: var(--clr-primary);
    color: var(--clr-text-light);
}

#menu-content div[data-dark="true"] {
    color: var(--clr-text-light);
}

#menu-content div[data-dark="false"] {
    color: var(--clr-text-dark);
}

#menu-content div:hover {
    transform: scale(1.05);
    opacity: 0.9;
}

#menu-content div:nth-child(1) { background-color: var(--clr-primary-lighter); }
#menu-content div:nth-child(2) { background-color: var(--clr-secondary); }
#menu-content div:nth-child(3) { background-color: var(--clr-accent); }
#menu-content div:nth-child(4) { background-color: var(--clr-primary); }
#menu-content div:nth-child(5) { background-color: var(--clr-secondary-darker); }
#menu-content div:nth-child(6) { background-color: var(--clr-primary-darker); }
#menu-content div:nth-child(7) { background-color: var(--clr-primary-lighter); }
#menu-content div:nth-child(8) { background-color: var(--clr-secondary); }
#menu-content div:nth-child(9) { background-color: var(--clr-accent); }
#menu-content div:nth-child(10) { background-color: var(--clr-primary); }
#menu-content div:nth-child(11) { background-color: var(--clr-secondary-darker); }