#sidebar {
    display: flex;
    flex-direction: column;
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
    padding-bottom: 0;
    width: 285px;
    background: linear-gradient(180deg, #0b1739 0%, #08122e 100%);
    color: #fff;
    border-right: 1px solid #172a55;
}
#sidebar > .logo {
    flex: 0 0 auto;
    justify-content: center;
    margin: 0 0 18px;
    padding: 14px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 10px 28px #02081740;
}
#sidebar .brand-logo-sidebar { width: 170px; height: 170px; }
.shell { margin-left: 285px; }
#sidebar nav {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 4px 6px 32px 0;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #49618f transparent;
}
#sidebar nav::-webkit-scrollbar { width: 6px; }
#sidebar nav::-webkit-scrollbar-track { background: transparent; }
#sidebar nav::-webkit-scrollbar-thumb { background: #49618f; border-radius: 99px; }
#sidebar nav::-webkit-scrollbar-thumb:hover { background: #6f85ad; }
#sidebar nav a { position: relative; color: #cbd5ea; font-weight: 550; }
#sidebar nav a:hover { background: #172a55; color: #fff; }
#sidebar nav a.active {
    background: #1b3568;
    color: #fff;
    font-weight: 700;
    box-shadow: 0 6px 18px #02081755;
}
#sidebar nav a.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 9px;
    bottom: 9px;
    width: 3px;
    border-radius: 4px;
    background: #4f8cff;
}
@media (max-width: 800px) {
    #sidebar { z-index: 30; width: min(285px, 88vw); box-shadow: 18px 0 45px #02081755; }
    .shell { margin-left: 0; }
    .menu-open::after { content: ''; position: fixed; inset: 0; background: #07112670; z-index: 20; }
}