.account-user { position: relative; display: flex; align-items: center; }
.account-trigger { display: flex; align-items: center; gap: 9px; width: auto; min-width: 188px; height: 48px; padding: 5px 10px 5px 6px; border: 1px solid #cfe0ff; border-radius: 12px; background: #fff; color: #173b80; cursor: pointer; text-align: left; transition: background .18s, border-color .18s, box-shadow .18s; }
.account-trigger:hover, .account-trigger[aria-expanded="true"] { background: #f2f7ff; border-color: #a9c7fb; box-shadow: 0 5px 16px #4169e114; }
.account-avatar { display: grid; place-items: center; flex: 0 0 38px; width: 38px; height: 38px; overflow: hidden; border-radius: 50%; background: linear-gradient(135deg, #4b65ed, #8b52df); color: #fff; font-size: 15px; font-weight: 800; }
.account-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.account-user-copy { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 1px; }
.account-user-copy strong { overflow: hidden; color: #173b80; font-size: 13px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.account-user-copy small { color: #8055c9; font-size: 11px; font-weight: 700; white-space: nowrap; }
.account-panel { position: absolute; top: calc(100% + 10px); right: 0; z-index: 50; display: none; width: 280px; padding: 9px; border: 1px solid #dfe8f8; border-radius: 15px; background: #fff; box-shadow: 0 20px 45px #2e4a8526; }
.account-panel.open, .account-user:focus-within .account-panel { display: block; }
.account-panel-summary { padding: 9px 11px 12px; margin: 0 0 6px; border-bottom: 1px solid #e9eef8; }
.account-panel-summary strong, .account-panel-summary small, .account-panel-summary b { display: block; }
.account-panel-summary strong { color: #173b80; font-size: 14px; }
.account-panel-summary small { margin-top: 3px; color: #75829d; font-size: 11px; }
.account-panel-summary b { margin-top: 7px; color: #c77b27; font-size: 13px; }
.account-panel a, .account-panel form button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 42px; padding: 10px 11px; border: 0; border-radius: 10px; background: transparent; color: #405275; font-size: 13px; font-weight: 600; text-align: left; text-decoration: none; cursor: pointer; }
.account-panel a:hover, .account-panel form button:hover { background: #f0f6ff; color: #315dc2; }
.account-panel a:first-of-type { margin-top: 2px; }
.account-panel form { display: block; margin: 7px 0 0; padding-top: 7px; border-top: 1px solid #e9eef8; }
.account-panel form button { color: #c34c5d; }
.account-panel form button:hover { background: #fff1f3; color: #b52d45; }
.account-panel span { flex: 1; }
.account-panel form input { display: none; }

@media (max-width: 767px) {
  .account-trigger { min-width: 48px; width: 48px; padding: 5px; justify-content: center; }
  .account-user-copy { display: none; }
  .account-panel { right: -4px; width: min(280px, calc(100vw - 24px)); }
  .account-panel-summary .account-user-copy { display: flex; }
}

@media (max-width: 390px) {
  .account-panel { right: -8px; width: calc(100vw - 20px); }
}