.nav__auth{position:relative;display:inline-flex;align-items:center}
.nav__auth-btn{gap:10px}
.nav__auth-caret{margin-left:2px;font-size:.9em;opacity:.85;transition:transform .18s ease}
.nav__auth.is-open .nav__auth-caret{transform:rotate(180deg)}

.nav__auth-menu{
    position:absolute;
    top:calc(100% + 10px);
    left:0;
    right:0;
    width:auto;
    box-sizing:border-box;

    padding:5px;
    border-radius:16px;
    background:rgba(32,32,32,.95);
    border:1px solid rgba(255,255,255,.06);
    box-shadow:0 18px 50px rgba(0,0,0,.45);
    backdrop-filter:blur(10px);

    transform:translateY(-10px);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .18s ease, transform .18s ease, visibility .18s ease;
    z-index:9999;
}

.nav__auth.is-open .nav__auth-menu{
    transform:translateY(0);
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}

.nav__auth-item{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 12px;
    border-radius:12px;
    text-decoration:none;
    color:inherit;
    transition:background .18s ease, transform .18s ease;
}

.nav__auth-item:hover{
    background:rgba(255,255,255,.06);
    transform:translateY(-1px);
}

.mobile-auth{width:100%;display:flex;flex-direction:column;gap:10px}
.mobile-auth__menu{
    padding:10px;
    border-radius:16px;
    background:rgba(32,32,32,.95);
    border:1px solid rgba(255,255,255,.06);
    box-shadow:0 18px 50px rgba(0,0,0,.45);
    backdrop-filter:blur(10px);
    transform:translateY(-10px);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .18s ease, transform .18s ease, visibility .18s ease;
}

.mobile-auth.is-open .mobile-auth__menu{
    transform:translateY(0);
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}

.mobile-auth{
    width:100%;
}

.mobile-auth__btn{
    width:100%;
    display:flex;
    align-items:center;
    gap:10px;
    justify-content:flex-start;
}

.mobile-auth__btn span{
    flex:1;
    text-align:center;
}

.mobile-auth__btn .nav__auth-caret{
    margin-left:0;
}

.mobile-auth__menu{
    width:100%;
    box-sizing:border-box;
}

.mobile-auth.is-open .nav__auth-caret{
    transform:rotate(180deg)
}

.mobile-auth__btn[aria-expanded="true"] .nav__auth-caret{
    transform:rotate(180deg)
}

@media (max-width: 768px){
    .mobile-auth{
        width:100%;
        max-width:300px;
        margin-top:24px;
    }

    .mobile-auth__btn{
        width:100%;
        margin-top:0;
    }

    .mobile-auth__menu{
        max-height:0;
        padding:0;
        margin:0;
        border:0;
        box-shadow:none;

        overflow:hidden;
        opacity:0;
        visibility:hidden;
        pointer-events:none;
        transform:translateY(-10px);

        transition:
        max-height .22s ease,
        padding .18s ease,
        opacity .18s ease,
        transform .18s ease,
        visibility .18s ease;
    }

    .mobile-auth.is-open .mobile-auth__menu{
        max-height:260px;
        padding:10px;

        border:1px solid rgba(255,255,255,.06);
        box-shadow:0 18px 50px rgba(0,0,0,.45);
        background:rgba(32,32,32,.95);
        backdrop-filter:blur(10px);

        opacity:1;
        visibility:visible;
        pointer-events:auto;
        transform:translateY(0);
    }
}