.overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.45);
    opacity:0;
    visibility:hidden;
    transition:.3s;
    z-index:998;
}

.overlay.show{
    opacity:1;
    visibility:visible;
}

.sidebar{
    position:fixed;
    top:0;
    right:-340px;
    left:auto;
    width:320px;
    height:100vh;
    background:#fff;
    transition:.3s;
    z-index:999;
    overflow-y:auto;
    box-shadow:0 0 20px rgba(0,0,0,.1);
}

.sidebar.show{
    right:0;
}

.sidebar-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:20px;
    border-bottom:1px solid #eee;
}

.sidebar-brand{
    display:flex;
    align-items:center;
    gap:12px;
}

.sidebar-brand img{
    width:50px;
}

.sidebar-brand h3{
    font-size:16px;
    margin-bottom:2px;
}

.sidebar-brand small{
    color:#777;
}

.close-btn{
    border:none;
    background:none;
    font-size:30px;
    cursor:pointer;
}

.sidebar-nav ul{
    list-style:none;
}

.sidebar-nav a,
.submenu-btn{
    width:100%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:15px 20px;
    border:none;
    background:none;
    color:#222;
    cursor:pointer;
    font-size:15px;
}

.sidebar-nav a:hover,
.submenu-btn:hover{
    background:#f4f4f4;
}

.submenu{
    display:none;
    background:#fafafa;
}

.submenu.show{
    display:block;
}

.submenu a{
    padding-left:40px;
}