#sharedSidebar{
    width:248px;
    min-width:248px;
    flex-shrink:0;
}

#sharedSidebar .sidebar{
    position:fixed;
    inset:0 auto 0 0;
    z-index:30;

    width:248px;
    height:100vh;
    padding:18px 16px;

    display:flex;
    flex-direction:column;

    border-right:1px solid rgba(181,103,255,.24);
    background:#0d0a12;
    box-shadow:14px 0 40px rgba(0,0,0,.24);
}

#sharedSidebar .brand{
    padding:4px 4px 18px;
    display:flex;
    align-items:center;
    gap:12px;

    border-bottom:1px solid rgba(181,103,255,.24);
}

#sharedSidebar .brand-link{
    display:flex;
    align-items:center;
    gap:12px;

    color:#f6f0fc;
    text-decoration:none;
}

#sharedSidebar .brand img{
    width:48px;
    height:48px;
    object-fit:cover;

    border:1px solid rgba(191,117,255,.52);
    border-radius:13px;
}

#sharedSidebar .brand strong{
    font-family:Georgia,serif;
    font-size:18px;
    letter-spacing:.16em;
}

#sharedSidebar .nav{
    margin-top:20px;
    display:grid;
    gap:7px;
}

#sharedSidebar .nav a{
    width:100%;
    min-height:46px;
    padding:0 13px;

    display:grid;
    grid-template-columns:26px 1fr;
    align-items:center;
    gap:10px;

    border:1px solid transparent;
    border-radius:11px;

    background:transparent;
    color:#a99fb4;

    text-align:left;
    text-decoration:none;

    transition:
        transform .15s,
        border-color .15s,
        background .15s,
        color .15s;
}

#sharedSidebar .nav a:hover{
    transform:translateX(2px);

    border-color:rgba(181,103,255,.24);
    background:rgba(169,91,255,.12);
    color:#f6f0fc;
}

#sharedSidebar .nav a.active{
    transform:none;

    border-color:rgba(191,117,255,.52);
    background:
        linear-gradient(
            90deg,
            rgba(169,91,255,.20),
            rgba(169,91,255,.04)
        );

    color:#d69dff;

    box-shadow:
        inset 3px 0 0 #a95bff;
}

#sharedSidebar .nav a span:first-child{
    color:#d69dff;
    font-size:20px;
    text-align:center;
}

#sharedSidebar .profile-wrap{
    position:relative;
    margin-top:auto;
}

#sharedSidebar .profile{
    width:100%;
    margin:0;
    padding:12px;

    display:grid;
    grid-template-columns:40px 1fr 24px;
    align-items:center;
    gap:10px;

    border:1px solid rgba(181,103,255,.24);
    border-radius:13px;

    background:rgba(25,19,34,.82);
    color:#f6f0fc;

    cursor:pointer;
    text-align:left;
}

#sharedSidebar .avatar{
    width:40px;
    height:40px;

    display:grid;
    place-items:center;

    border:1px solid rgba(191,117,255,.52);
    border-radius:50%;

    background:
        linear-gradient(
            145deg,
            #2a193c,
            #120b19
        );

    color:#d69dff;
    font-weight:800;
}

#sharedSidebar .profile-copy strong,
#sharedSidebar .profile-copy small{
    display:block;
}

#sharedSidebar .profile-copy small{
    margin-top:3px;
    color:#d69dff;
}

#sharedSidebar .profile-menu{
    position:absolute;
    left:0;
    right:0;
    bottom:72px;

    padding:7px;
    display:grid;
    gap:4px;

    border:1px solid rgba(181,103,255,.24);
    border-radius:12px;

    background:#15101c;
    box-shadow:0 20px 55px rgba(0,0,0,.34);
}

#sharedSidebar .profile-menu[hidden]{
    display:none;
}

#sharedSidebar .profile-menu a,
#sharedSidebar .profile-menu button{
    min-height:38px;
    padding:0 10px;

    display:flex;
    align-items:center;

    border:0;
    border-radius:8px;

    background:transparent;
    color:#a99fb4;

    text-decoration:none;
    cursor:pointer;
}

#sharedSidebar .profile-menu a:hover,
#sharedSidebar .profile-menu button:hover{
    background:rgba(169,91,255,.12);
    color:#f6f0fc;
}

#sharedSidebar .profile-menu button:disabled{
    opacity:.45;
    cursor:not-allowed;
}

#sharedSidebar a:focus-visible,
#sharedSidebar button:focus-visible,
.sidebar-backdrop:focus-visible {
    outline: 3px solid rgba(214,157,255,.72);
    outline-offset: 2px;
}
/* Mobile Navigation */
.sidebar-close {
    display: none;
}

.brand-mark {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(191,117,255,.52);
    border-radius: 13px;
    background:
        radial-gradient(circle at 55% 35%, rgba(204,137,255,.45), transparent 38%),
        linear-gradient(145deg, #2a193c, #100b17);
    color: #eee1ff;
    font-family: Georgia, serif;
    font-size: 29px;
    font-weight: 700;
    box-shadow: 0 0 20px rgba(169,91,255,.24);
}

.sidebar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 39;
    border: 0;
    padding: 0;
    background: rgba(4,2,7,.68);
    backdrop-filter: blur(3px);
    cursor: pointer;
}

.sidebar-backdrop[hidden] {
    display: none !important;
}

@media (max-width: 800px) {
    #sharedSidebar {
        width: 0;
        min-width: 0;
    }

    #sharedSidebar .sidebar {
        z-index: 40;
        width: min(78vw, 320px);
        min-width: 0;
        height: 100dvh;
        padding:
            max(16px, env(safe-area-inset-top))
            max(14px, env(safe-area-inset-right))
            max(18px, env(safe-area-inset-bottom))
            max(14px, env(safe-area-inset-left));
        transform: translateX(-105%);
        visibility: hidden;
        transition: transform .22s ease, visibility .22s ease;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    body.sidebar-open #sharedSidebar .sidebar {
        transform: translateX(0);
        visibility: visible;
    }

    #sharedSidebar .brand {
        position: relative;
        padding-right: 46px;
    }

    #sharedSidebar .brand strong {
        font-size: 17px;
        letter-spacing: .13em;
    }

    #sharedSidebar .nav a {
        min-height: 52px;
        font-size: 16px;
    }

    #sharedSidebar .profile-wrap {
        padding-top: 24px;
    }

    .sidebar-close {
        position: absolute;
        top: 8px;
        right: 0;
        width: 44px;
        height: 44px;
        display: grid;
        place-items: center;
        border: 1px solid rgba(181,103,255,.24);
        border-radius: 11px;
        background: rgba(169,91,255,.08);
        color: #f6f0fc;
        font-size: 23px;
        line-height: 1;
        cursor: pointer;
    }
}

@media (max-width: 800px) and (max-height: 620px) {
    #sharedSidebar .nav {
        margin-top: 12px;
        gap: 4px;
    }

    #sharedSidebar .nav a {
        min-height: 46px;
    }

    #sharedSidebar .profile-wrap {
        padding-top: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #sharedSidebar *,
    .sidebar-backdrop {
        transition: none !important;
    }
}