#side-menu {
    position: fixed; /* Keep layout */
    left: 0; /* Keep layout */
    top: 0; /* Keep layout */
    width: 80px; /* Keep size */
    height: 100vh; /* Keep size */
    background: var(--gradient-dark); /* Use theme variable */
    border-right: 1px solid var(--clay-border); /* Use theme variable */
    padding-top: 1rem; /* Keep padding */
    z-index: 1000; /* Keep layering */
    display: flex; /* Keep layout */
    flex-direction: column; /* Keep layout */
    align-items: center; /* Keep layout */
    box-shadow: 4px 0 15px var(--clay-shadow); /* Use theme variable */
}

.main-menu {
    display: flex; /* Keep layout */
    flex-direction: column; /* Keep layout */
    align-items: center; /* Keep layout */
    gap: 1rem; /* Keep spacing */
}

.menu-item img {
    width: 50px; /* Keep size */
    height: 50px; /* Keep size */
    cursor: pointer; /* Keep interaction */
    border-radius: 0.5rem; /* Keep rounding */
    transition: transform 0.2s, box-shadow 0.2s, opacity 0.3s; /* Keep transition */
    background-color: var(--clay-dark); /* Use theme variable */
    border: 1px solid var(--clay-border); /* Use theme variable */
    padding: 0.25rem; /* Keep padding */
}

/* REMOVED HOVER EFFECT FOR MENU ITEM IMAGE
.menu-item img:hover {
    transform: scale(1.1);
    box-shadow: 0 0 10px var(--clay-glow);
    border-color: var(--clay-secondary);
    background-color: var(--clay-medium);
} */

.locked-menu-item {
    opacity: 0.4 !important; /* Adjusted opacity */
    pointer-events: none !important; /* Keep interaction */
    filter: grayscale(80%); /* Adjusted filter */
    position: relative; /* Keep layout */
}

.locked-menu-item::after { /* Keep lock indicator */
    content: '🔒';
    position: absolute;
    top: -5px;
    right: -5px;
    font-size: 1rem; /* Adjusted size */
    pointer-events: none;
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.7); /* Adjust shadow */
    color: var(--clay-text-primary); /* Ensure visibility */
}

.submenu {
    display: none; /* Keep layout */
    position: fixed; /* Keep layout */
    left: 90px; /* Position next to the side menu */
    background: var(--gradient-surface); /* Use theme variable */
    padding: 0.75rem; /* Adjusted padding */
    border-radius: 0.5rem; /* Adjusted rounding */
    display: flex; /* Keep layout */
    gap: 0.75rem; /* Adjusted gap */
    align-items: center; /* Keep layout */
    border: 1px solid var(--clay-border-light); /* Use theme variable */
    box-shadow: 4px 4px 15px var(--clay-shadow); /* Use theme variable */
    backdrop-filter: blur(5px); /* Add blur */
}

.submenu-item img {
    width: 40px; /* Adjusted size */
    height: 40px; /* Adjusted size */
    cursor: pointer; /* Keep interaction */
    border-radius: 0.375rem; /* Adjusted rounding */
    transition: transform 0.2s, opacity 0.3s; /* Keep transition */
    background-color: var(--clay-dark); /* Use theme variable */
    border: 1px solid var(--clay-border); /* Use theme variable */
    padding: 0.2rem; /* Adjusted padding */
}

/* REMOVED HOVER EFFECT FOR SUBMENU ITEM IMAGE
.submenu-item img:hover {
    transform: scale(1.1);
    border-color: var(--clay-secondary);
    background-color: var(--clay-medium);
} */

/* Apply locked styles to submenu items too */
.submenu-item.locked-menu-item {
    /* Styles handled by theme */
}

/* Hidden utility class - redundant if in main.css */
/* .hidden { display: none !important; } */