/* Menu profil putih susu solid agar konten di belakang tidak menembus. */
.account-menu {
  overflow: hidden;
  isolation: isolate;
  border: 1px solid #e9e5de;
  background-color: #fffdf9;
  background-image:
    radial-gradient(circle at 100% 0%, rgba(117, 88, 225, .055), transparent 135px),
    linear-gradient(145deg, #fffefb 0%, #fbf9f5 58%, #f7f5f1 100%);
  box-shadow:
    0 24px 62px rgba(39, 35, 67, .21),
    0 6px 18px rgba(39, 35, 67, .09),
    inset 0 1px 0 #fff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.account-menu::before {
  z-index: 0;
  border-color: #e9e5de;
  background: #fffdf9;
}

.account-menu-header,
.account-menu-actions {
  position: relative;
  z-index: 1;
}

.account-menu-header {
  border-bottom-color: #e9e6df;
  background: linear-gradient(110deg, rgba(255, 255, 255, .82), rgba(248, 245, 255, .52));
}

.account-menu-header p { color: #24283a; }
.account-menu-header small { color: #858c9d; }

.account-role {
  color: #5d52ca;
  border: 1px solid #e6e1fb;
  background: #f1effd;
}

.account-menu-actions {
  margin: 0 -1px -1px;
  padding: 8px 1px 1px;
  background: #fffdf9;
}

.account-menu .account-menu-actions .btn {
  border: 1px solid transparent;
  color: #4f586a;
  background: #fffdf9;
}

.account-menu .account-menu-actions .btn:hover {
  color: #5147c8;
  border-color: #e8e3fb;
  background: linear-gradient(135deg, #f8f6ff, #f1effd);
  box-shadow: 0 7px 17px rgba(87, 75, 170, .08);
}

.account-menu .account-menu-actions [data-action="logout"] {
  color: #ad4556;
}

.account-menu .account-menu-actions [data-action="logout"]:hover {
  color: #a23649;
  border-color: #f3dfe3;
  background: #fff1f3;
  box-shadow: 0 7px 17px rgba(168, 54, 73, .07);
}

.account-btn[aria-expanded="true"] {
  color: #5147c8;
  border-color: rgba(103, 92, 240, .19);
  background: linear-gradient(145deg, #fffefa, #f4f1ff);
  box-shadow: 0 8px 22px rgba(83, 70, 162, .12), inset 0 1px 0 #fff;
}