.account {
    position:
        relative;
    display:
        flex;
    align-items:
        center;
}
.account__sign-in[hidden],
.account__authenticated[hidden] {
    display:
        none !important;
}
.account__sign-in {
    min-height:
        38px;
    display:
        inline-flex;
    align-items:
        center;
    justify-content:
        center;
    padding:
        0 16px;
    color:
        var(--text);
    background:
        var(--background-raised);
    border:
        1px solid
        var(--border);
    border-radius:
        999px;
    font-size:
        13px;
    font-weight:
        600;
    text-decoration:
        none;
    cursor:
        url('../../images/cursors/pointer.png'),
        pointer;
    transition:
        background var(--transition-fast),
        border-color var(--transition-fast),
        transform var(--transition-fast);
}
.account__sign-in:hover {
    background:
        var(--surface-hover);
    border-color:
        var(--border-strong);
}
.account__sign-in:active {
    transform:
        scale(0.97);
}
.account__authenticated {
    position:
        relative;
}
.account .profile-button {
    width:
        39px;
    height:
        39px;
    display:
        grid;
    place-items:
        center;
    margin-left:
        2px;
    padding:
        0;
    color:
        var(--text-secondary);
    background:
        transparent;
    border:
        0;
    border-radius:
        50%;
    outline:
        none;
    cursor:
        url('../../images/cursors/pointer.png'),
        pointer;
    transition:
        color var(--transition-fast),
        background var(--transition-fast),
        transform var(--transition-fast);
}
.account .profile-button:active {
    transform:
        scale(0.93);
}
.profile-button__avatar {
    position:
        relative;
    width:
        36px;
    height:
        36px;
    display:
        grid;
    place-items:
        center;
    overflow:
        hidden;
    color:
        #ffffff;
    background:
        var(--vw-gradient);
    border-radius:
        50%;
    font-size:
        14px;
    font-weight:
        680;
    user-select:
        none;
    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.16);
    transition:
        transform var(--transition),
        box-shadow var(--transition);
}
.profile-button:hover
.profile-button__avatar {
    transform:
        scale(1.04);
    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.20),
        0 5px 18px
        rgba(47, 99, 233, 0.18);
}
.profile-button__image,
.profile-button__initial {
    grid-area:
        1 / 1;
}
.profile-button__image {
    width:
        100%;
    height:
        100%;
    object-fit:
        cover;
}
.profile-button__image[hidden],
.profile-button__initial[hidden] {
    display:
        none !important;
}
.account-menu {
    position:
        absolute;
    top:
        calc(100% + 12px);
    right:
        0;
    z-index:
        500;
    width:
        270px;
    padding:
        8px;
    background:
        rgba(15, 18, 25, 0.96);
    border:
        1px solid
        rgba(255, 255, 255, 0.09);
    border-radius:
        16px;
    box-shadow:
        0 18px 50px
        rgba(0, 0, 0, 0.35);
    backdrop-filter:
        blur(20px);
    -webkit-backdrop-filter:
        blur(20px);
    transform-origin:
        top right;
}
.account-menu[hidden] {
    display:
        none !important;
}
.account-menu.is-opening {
    animation:
        account-menu-in
        170ms
        var(--ease-smooth)
        both;
}
@keyframes account-menu-in {
    from {
        opacity:
            0;
        transform:
            translateY(-5px)
            scale(0.975);
    }
    to {
        opacity:
            1;
        transform:
            translateY(0)
            scale(1);
    }
}
.account-menu__identity {
    min-width:
        0;
    display:
        flex;
    align-items:
        center;
    gap:
        11px;
    padding:
        10px;
}
.account-menu__avatar {
    flex:
        0 0 auto;
    width:
        38px;
    height:
        38px;
    display:
        grid;
    place-items:
        center;
    overflow:
        hidden;
    color:
        #ffffff;
    background:
        var(--vw-gradient);
    border-radius:
        50%;
    font-size:
        14px;
    font-weight:
        680;
}
.account-menu__avatar img,
.account-menu__avatar span {
    grid-area:
        1 / 1;
}
.account-menu__avatar img {
    width:
        100%;
    height:
        100%;
    object-fit:
        cover;
}
.account-menu__avatar img[hidden],
.account-menu__avatar span[hidden] {
    display:
        none !important;
}
.account-menu__identity-copy {
    min-width:
        0;
    display:
        flex;
    flex-direction:
        column;
    gap:
        2px;
}
.account-menu__identity-copy strong,
.account-menu__identity-copy span {
    overflow:
        hidden;
    white-space:
        nowrap;
    text-overflow:
        ellipsis;
}
.account-menu__identity-copy strong {
    color:
        var(--text);
    font-size:
        13px;
    font-weight:
        620;
}
.account-menu__identity-copy span {
    color:
        var(--text-tertiary);
    font-size:
        11px;
}
.account-menu__divider {
    height:
        1px;
    margin:
        6px 4px;
    background:
        rgba(255, 255, 255, 0.07);
}
.account-menu__item {
    width:
        100%;
    min-height:
        39px;
    display:
        flex;
    align-items:
        center;
    gap:
        11px;
    padding:
        0 10px;
    color:
        var(--text-secondary);
    background:
        transparent;
    border:
        0;
    border-radius:
        10px;
    font:
        inherit;
    font-size:
        12px;
    font-weight:
        540;
    text-align:
        left;
    text-decoration:
        none;
    cursor:
        url('../../images/cursors/pointer.png'),
        pointer;
    transition:
        color var(--transition-fast),
        background var(--transition-fast);
}
.account-menu__item i {
    width:
        17px;
    color:
        var(--text-tertiary);
    font-size:
        13px;
    text-align:
        center;
    transition:
        color var(--transition-fast);
}
.account-menu__item:hover {
    color:
        var(--text);
    background:
        var(--surface-hover);
}
.account-menu__item:hover i {
    color:
        var(--text-secondary);
}
.account-menu__item--danger:hover {
    color:
        #e98b8b;
    background:
        rgba(220, 70, 70, 0.08);
}
.account-menu__item--danger:hover i {
    color:
        #e98b8b;
}
.account .profile-button:focus-visible,
.account__sign-in:focus-visible,
.account-menu__item:focus-visible {
    outline:
        2px solid
        var(--vw-blue-bright);
    outline-offset:
        2px;
}