.profile-menu {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.profile-menu[hidden] { display: none !important; }

.profile-avatar-btn {
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  border-radius: 50%;
  line-height: 0;
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s;
}
.profile-avatar-btn:focus-visible {
  outline: 2px solid #CA233F;
  outline-offset: 2px;
}
.profile-avatar-btn:active,
.profile-avatar-btn.is-pressed {
  transform: scale(0.92);
}

.profile-avatar {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #192126;
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  background-size: cover;
  background-position: center;
  border: 2px solid #e8e0e2;
}
.profile-avatar.has-photo { color: transparent; }
.profile-avatar.large {
  width: 48px;
  height: 48px;
  font-size: 1.15rem;
}

.profile-drop {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 260px;
  background: #fff;
  border: 1px solid #e8e0e2;
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(25, 33, 38, 0.14);
  z-index: 80;
  padding: 8px;
}
.profile-drop[hidden] { display: none !important; }

.profile-drop-head {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 10px 12px;
  border-bottom: 1px solid #eee;
  margin-bottom: 6px;
}
.profile-drop-meta {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.profile-drop-meta strong {
  font-size: 0.92rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-drop-meta .muted {
  font-size: 0.78rem;
  color: #666;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-drop-item {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 10px 12px;
  border-radius: 8px;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  -webkit-tap-highlight-color: transparent;
  transition: background .12s, transform .1s;
  color: #192126;
  cursor: pointer;
  text-decoration: none;
}
a.profile-drop-item { color: #192126; }
.profile-drop-item:hover { background: rgba(202, 35, 63, 0.06); color: #CA233F; }
.profile-drop-item:active,
.profile-drop-item.is-pressed {
  background: rgba(202, 35, 63, 0.14);
  color: #CA233F;
  transform: scale(0.98);
}
.profile-drop-item:focus-visible {
  outline: 2px solid rgba(202, 35, 63, 0.45);
  outline-offset: 1px;
}
.profile-drop-item.danger { color: #CA233F; }
.profile-drop-item[hidden] { display: none !important; }

@media (max-width: 900px) {
  .profile-menu { width: 100%; margin-top: 8px; }
  .profile-avatar-btn { margin: 4px 0; }
  .profile-drop {
    position: static;
    box-shadow: none;
    border: 0;
    padding: 0;
    margin-top: 4px;
    min-width: 0;
  }
}