/* The account button + its menu in the top bar (js/account-menu.js).
   The button takes the bar's text color, the menu is always a light card. */
.acct { position: relative; }
.acct-btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 10px 0 4px;
  border-radius: 999px;
  font: inherit; font-size: 14px; font-weight: 500;
  color: inherit; background: transparent; cursor: pointer;
  border: 1px solid transparent;
  transition: background .2s, border-color .2s;
}
.acct-btn:hover, .acct.open .acct-btn { background: rgba(0, 0, 0, 0.06); border-color: rgba(0, 0, 0, 0.12); }
.acct-btn:focus-visible { outline: 2px solid #2f5d8a; outline-offset: 2px; }
.acct-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); flex: none; }
.acct-name { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-arrow { width: 16px; height: 16px; transition: transform .25s; flex: none; }
.acct.open .acct-arrow { transform: rotate(180deg); }

.acct-menu {
  position: absolute; right: 0; top: calc(100% + 8px);
  width: 240px; padding: 6px;
  background: #fff; color: #1f2d3d;
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .18), 0 0 0 1px rgba(31, 45, 61, .06);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s, transform .18s, visibility .18s;
  z-index: 40;
}
.acct.open .acct-menu { opacity: 1; visibility: visible; transform: none; }
.acct-head { display: flex; align-items: center; gap: 10px; padding: 8px 10px 10px; border-bottom: 1px solid #eef1f4; margin-bottom: 4px; }
.acct-head .acct-avatar { width: 38px; height: 38px; }
.acct-head div { display: flex; flex-direction: column; min-width: 0; }
.acct-head b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-head span { font-size: 12px; color: #5a6878; }
.acct-item {
  display: block; padding: 9px 12px; border-radius: 9px;
  font-size: 14px; font-weight: 500; color: #1f2d3d; text-decoration: none;
}
.acct-item:hover, .acct-item:focus-visible { background: #eef3f9; outline: none; }
.acct-item { display: flex; align-items: center; justify-content: space-between; }
.acct-badge { min-width: 22px; padding: 1px 7px; border-radius: 999px; background: #2f5d8a; color: #fff; font-size: 12px; font-weight: 700; text-align: center; }
.acct-dot { width: 9px; height: 9px; border-radius: 50%; background: #d9534f; box-shadow: 0 0 0 2px #fff; margin-left: -4px; }
.acct-sep { height: 1px; background: #eef1f4; margin: 4px 6px; }
.acct-out { color: #b03a3a; }
.acct-out:hover, .acct-out:focus-visible { background: #fdecec; }

@media (max-width: 560px) { .acct-name { display: none; } }