.header-display-name {
  max-width: 210px;
  overflow: hidden;
  color: #eee6f8;
  font-size: 12px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-menu {
  position: relative;
}

.profile-trigger {
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.profile-avatar {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  overflow: hidden;
  border: 1px solid rgba(216, 190, 255, .48);
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(174, 111, 255, .96), rgba(85, 35, 169, .95));
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 0 20px rgba(144, 78, 238, .28);
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  letter-spacing: -.5px;
}

.profile-avatar::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 3px rgba(11, 5, 22, .2);
  pointer-events: none;
}

.profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.header-avatar {
  width: 42px;
  height: 42px;
  font-size: 13px;
}

.profile-trigger:hover .header-avatar,
.profile-trigger[aria-expanded="true"] .header-avatar {
  border-color: rgba(232, 214, 255, .9);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38), 0 0 0 4px rgba(151, 91, 241, .13), 0 0 24px rgba(147, 83, 239, .42);
}

.profile-popover {
  position: absolute;
  z-index: 30;
  top: calc(100% + 13px);
  right: 0;
  width: 210px;
  padding: 8px;
  border: 1px solid rgba(213, 185, 255, .22);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(39, 22, 62, .96), rgba(15, 8, 27, .98));
  box-shadow: 0 18px 48px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .08);
  backdrop-filter: blur(22px);
  animation: profile-popover-in .2s ease both;
}

.profile-popover[hidden] {
  display: none;
}

.profile-popover a,
.profile-popover button {
  display: block;
  width: 100%;
  padding: 12px 13px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #eee4fb;
  font-size: 11px;
  font-weight: 650;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background .18s, color .18s;
}

.profile-popover a:hover,
.profile-popover button:hover {
  background: rgba(151, 91, 239, .18);
  color: #fff;
}

@keyframes profile-popover-in {
  from { opacity: 0; transform: translateY(-6px) scale(.98); }
  to { opacity: 1; transform: none; }
}

.profile-shell {
  max-width: 1040px;
}

.profile-current {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.profile-avatar-large {
  width: 152px;
  height: 152px;
  margin-bottom: 24px;
  border-width: 2px;
  font-size: 44px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 0 0 8px rgba(139, 80, 226, .08), 0 25px 60px rgba(0, 0, 0, .38), 0 0 52px rgba(140, 74, 232, .24);
}

.profile-current h1 {
  margin: 8px 0 10px;
  font-size: clamp(38px, 5vw, 58px);
}

.profile-current > span:last-child {
  color: #9f92ad;
  font-size: 12px;
}

.avatar-library {
  margin-top: 58px;
  padding-top: 30px;
  border-top: 1px solid rgba(255, 255, 255, .09);
}

.avatar-library h2 {
  margin: 7px 0 0;
  font: 600 25px "Space Grotesk", sans-serif;
  letter-spacing: -1px;
}

.avatar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(125px, 1fr));
  gap: 14px;
  margin-top: 25px;
}

.avatar-option {
  display: grid;
  justify-items: center;
  gap: 11px;
  padding: 17px 12px 14px;
  border: 1px solid rgba(209, 180, 255, .14);
  border-radius: 15px;
  background: linear-gradient(145deg, rgba(43, 24, 69, .62), rgba(17, 9, 30, .74));
  color: #cbbddd;
  cursor: pointer;
  transition: transform .2s, border-color .2s, background .2s;
}

.avatar-option img {
  width: 82px;
  height: 82px;
  border: 2px solid rgba(206, 173, 255, .35);
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .3);
}

.avatar-option span {
  max-width: 100%;
  overflow: hidden;
  font-size: 10px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.avatar-option:hover,
.avatar-option.selected {
  transform: translateY(-3px);
  border-color: rgba(190, 143, 255, .58);
  background: linear-gradient(145deg, rgba(91, 48, 145, .72), rgba(26, 13, 45, .82));
}

.avatar-option.selected::after {
  content: "ATUAL";
  color: #cdaaff;
  font: 500 8px "DM Mono", monospace;
  letter-spacing: 1px;
}

.profile-empty {
  display: grid;
  place-items: center;
  gap: 8px;
  min-height: 190px;
  margin-top: 25px;
  padding: 30px;
  border: 1px dashed rgba(180, 129, 250, .35);
  border-radius: 16px;
  background: rgba(24, 12, 42, .4);
  text-align: center;
}

.profile-empty strong {
  color: #dfd0f2;
  font-size: 14px;
}

.profile-empty span {
  color: #9689a4;
  font-size: 11px;
}

.connected-modal-panel {
  width: min(100%, 610px);
}

.connected-modal-panel h2 {
  margin-bottom: 7px;
}

.connected-copy {
  margin: 0 0 24px;
  color: #9b8eaa;
  font-size: 11px;
}

.connected-users {
  display: grid;
  gap: 9px;
  max-height: min(52vh, 440px);
  overflow: auto;
  padding-right: 3px;
}

.connected-user {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 72px;
  padding: 10px 12px;
  border: 1px solid rgba(211, 181, 255, .15);
  border-radius: 12px;
  background: rgba(13, 7, 24, .5);
}

.connected-avatar {
  width: 46px;
  height: 46px;
  font-size: 13px;
}

.connected-user > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.connected-user strong {
  overflow: hidden;
  color: #eee5fa;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.connected-user span {
  overflow: hidden;
  color: #9d90ad;
  font: 10px "DM Mono", monospace;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.connected-user form {
  margin-left: auto;
}

.disconnect-user {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 147, 173, .32);
  border-radius: 9px;
  background: rgba(115, 29, 51, .28);
  color: #ffb2c4;
  cursor: pointer;
  font-size: 23px;
  line-height: 1;
  transition: background .18s, border-color .18s, transform .18s;
}

.disconnect-user:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 163, 185, .62);
  background: rgba(154, 38, 68, .48);
}

.connected-empty {
  display: grid;
  min-height: 130px;
  place-items: center;
  padding: 25px;
  border: 1px dashed rgba(183, 139, 250, .35);
  border-radius: 12px;
  color: #a99bb8;
  font-size: 11px;
  text-align: center;
}

@media (max-width: 720px) {
  .admin-badge { display: none; }
  .header-display-name { max-width: 110px; }
  .header-right { gap: 9px; }
  .header-avatar { width: 38px; height: 38px; }
  .profile-popover { right: -42px; }
  .profile-avatar-large { width: 126px; height: 126px; font-size: 37px; }
  .avatar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
  .header-display-name { display: none; }
  .header-right > form { display: none; }
}