.user-account { position: relative; }

.user-trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 7px 10px;
    border-radius: 12px;
    color: inherit;
    cursor: pointer;
    font: inherit;
    list-style: none;
    text-align: left;
}

.user-trigger::-webkit-details-marker { display: none; }
.user-trigger:hover, .user-account[open] .user-trigger { background: #f1f5fb; }
.user-trigger:focus-visible { outline: 3px solid #8bb7ff; outline-offset: 2px; }

.user-account .avatar {
    display: grid;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #0a67ed, #0545a8);
    box-shadow: 0 3px 8px rgb(7 95 229 / 20%);
    color: #fff;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .04em;
}

.user-account .account-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; line-height: 1.1; }
.user-account .account-copy strong { color: #172b43; font-size: 13px; font-weight: 800; white-space: nowrap; }
.user-account .account-copy small { color: #71809a; font-size: 11px; font-weight: 600; white-space: nowrap; }
.user-account .chevron { margin-left: 2px; color: #71809a; font-size: 16px; line-height: 1; transition: transform .18s ease; }
.user-account[open] .chevron { transform: rotate(180deg); }

.user-dropdown { position: absolute; right: 0; top: calc(100% + 10px); z-index: 101; width: 230px; padding: 8px; background: #fff; border: 1px solid #e2e9f2; border-radius: 14px; box-shadow: 0 16px 40px #001b3326; }
.user-account:not([open]) .user-dropdown { display: none; }
.user-menu-item { display: block; width: 100%; border: 0; border-radius: 8px; background: transparent; color: #34475f; cursor: pointer; font: inherit; font-size: 13px; font-weight: 700; padding: 11px 12px; text-align: left; text-decoration: none; }
.user-menu-item:hover, .user-menu-item:focus-visible { background: #edf4ff; color: #075fe5; outline: none; }
.user-menu-item:focus-visible { box-shadow: inset 0 0 0 2px #8bb7ff; }
.user-menu-signout { color: #a43b45; }
.user-menu-signout:hover, .user-menu-signout:focus-visible { background: #fff0f1; color: #a43b45; }
.user-dropdown form { margin: 0; }
.user-menu-divider { height: 1px; margin: 7px 4px; background: #edf1f6; }

@media (max-width: 600px) {
    .user-dropdown { right: -6px; }
    .account-copy { display: none; }
}