.home-account-menu {
  position: relative;
  display: none;
  flex: 0 0 auto;
}

.home-account-menu.is-ready {
  display: block;
}

.home-account-trigger {
  position: relative;
  width: 42px;
  height: 42px;
  padding: 2px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 13px;
  background: rgba(255,255,255,.045);
  color: #fff;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease;
}

.home-account-trigger:hover,
.home-account-trigger:focus-visible,
.home-account-menu.is-open .home-account-trigger {
  border-color: rgba(255,55,83,.65);
  background: rgba(255,55,83,.09);
  box-shadow: 0 0 0 3px rgba(255,55,83,.08);
  outline: none;
}

.home-account-trigger:hover { transform: translateY(-1px); }

.home-account-trigger img {
  width: 36px;
  height: 36px;
  display: block;
  border-radius: 10px;
  object-fit: cover;
  background: #17171a;
}

.home-account-presence,
.home-account-avatar > span {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 11px;
  height: 11px;
  border: 2px solid #0d0d10;
  border-radius: 50%;
  background: #27d980;
  box-shadow: 0 0 12px rgba(39,217,128,.65);
}

.home-account-dropdown {
  position: absolute;
  top: calc(100% + 13px);
  right: 0;
  width: 370px;
  padding: 13px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  background: linear-gradient(145deg,rgba(22,22,26,.98),rgba(11,11,14,.99));
  box-shadow: 0 26px 80px rgba(0,0,0,.52),0 0 0 1px rgba(255,50,80,.035) inset;
  backdrop-filter: blur(24px);
  transform-origin: top right;
  animation: home-account-in .18s ease-out both;
  z-index: 1020;
}

.home-account-dropdown::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 92px;
  pointer-events: none;
  background: radial-gradient(circle at 78% 0,rgba(255,46,78,.16),transparent 62%);
}

@keyframes home-account-in {
  from { opacity: 0; transform: translateY(-7px) scale(.975); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.home-account-head {
  position: relative;
  min-width: 0;
  padding: 5px 4px 14px;
  display: grid;
  grid-template-columns: 50px minmax(0,1fr) auto;
  align-items: center;
  gap: 11px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.home-account-avatar { position: relative; width: 48px; height: 48px; }
.home-account-avatar img { width: 48px; height: 48px; display: block; border-radius: 14px; object-fit: cover; background: #17171a; }
.home-account-avatar > span { right: -1px; bottom: -1px; }
.home-account-identity { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.home-account-identity strong { overflow: hidden; color: #fff; font-size: 15px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.home-account-identity span { color: #777781; font-size: 11px; font-weight: 650; }
.home-account-role { max-width: 92px; padding: 6px 8px; overflow: hidden; border: 1px solid rgba(255,55,83,.2); border-radius: 8px; background: rgba(255,55,83,.08); color: #ff536c; font-size: 9px; font-weight: 800; letter-spacing: .07em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }

.home-account-facts { padding: 11px 1px; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.home-account-facts > div { min-width: 0; padding: 9px; display: flex; align-items: center; gap: 8px; border: 1px solid rgba(255,255,255,.065); border-radius: 11px; background: rgba(255,255,255,.025); }
.home-account-facts i { color: #ff3b58; font-size: 12px; }
.home-account-facts span { min-width: 0; display: flex; flex-direction: column; gap: 2px; color: #6f6f79; font-size: 9px; font-weight: 700; text-transform: uppercase; }
.home-account-facts strong { overflow: hidden; color: #d9d9df; font-size: 10px; font-weight: 700; text-overflow: ellipsis; text-transform: none; white-space: nowrap; }

.home-account-wallet { padding: 12px; display: grid; grid-template-columns: 37px minmax(0,1fr) 30px; align-items: center; gap: 10px; border: 1px solid rgba(58,213,139,.15); border-radius: 13px; background: linear-gradient(120deg,rgba(42,190,123,.09),rgba(255,255,255,.025)); }
.home-account-wallet-icon { width: 37px; height: 37px; display: grid; place-items: center; border-radius: 10px; background: rgba(42,205,130,.12); color: #3ade8c; }
.home-account-wallet > span:nth-child(2) { min-width: 0; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.home-account-wallet small { width: 100%; color: #7f8784; font-size: 9px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.home-account-wallet strong { color: #effff7; font-size: 18px; line-height: 1; }
.home-account-wallet em { color: #908e96; font-size: 9px; font-style: normal; }
.home-account-wallet > a { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.08); border-radius: 9px; color: #9ea09f; transition: color .2s ease,background .2s ease; }
.home-account-wallet > a:hover { background: rgba(255,255,255,.06); color: #fff; }

.home-account-subscriptions-head { padding: 14px 3px 8px; display: flex; align-items: center; justify-content: space-between; }
.home-account-subscriptions-head span { color: #f0f0f3; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.home-account-subscriptions-head strong { color: #777781; font-size: 10px; }
.home-account-subscriptions { max-height: 164px; overflow: auto; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.14) transparent; }
.home-account-subscription { min-height: 53px; padding: 8px 7px; display: grid; grid-template-columns: 34px minmax(0,1fr) 12px; align-items: center; gap: 9px; border-radius: 10px; color: inherit; transition: background .18s ease; }
.home-account-subscription:hover { background: rgba(255,255,255,.045); }
.home-account-sub-icon { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid rgba(255,55,83,.15); border-radius: 9px; background: rgba(255,55,83,.07); color: #ff4963; font-size: 11px; }
.home-account-subscription > span:nth-child(2) { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.home-account-subscription strong { overflow: hidden; color: #e7e7eb; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.home-account-subscription small { overflow: hidden; color: #74747e; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.home-account-subscription > i { color: #55555d; font-size: 8px; }
.home-account-empty { padding: 17px 8px; display: flex; align-items: center; justify-content: center; gap: 8px; color: #777781; font-size: 11px; }
.home-account-empty i { color: #3bd98c; }

.home-account-footer { padding-top: 11px; display: grid; grid-template-columns: minmax(0,1fr) 39px; gap: 8px; border-top: 1px solid rgba(255,255,255,.075); }
.home-account-panel-link,.home-account-security-link { min-height: 39px; display: flex; align-items: center; justify-content: center; border-radius: 10px; font-size: 10px; font-weight: 800; }
.home-account-panel-link { gap: 8px; background: #f23852; color: #fff; box-shadow: 0 8px 22px rgba(242,56,82,.18); }
.home-account-panel-link:hover { background: #ff4860; }
.home-account-security-link { border: 1px solid rgba(255,255,255,.09); background: rgba(255,255,255,.035); color: #aaaab2; }
.home-account-security-link:hover { color: #fff; background: rgba(255,255,255,.065); }

@media (max-width: 720px) {
  .home-account-trigger { width: 38px; height: 38px; border-radius: 11px; }
  .home-account-trigger img { width: 32px; height: 32px; border-radius: 8px; }
  .home-account-dropdown { position: fixed; top: 70px; right: 14px; width: min(370px,calc(100vw - 28px)); }
  .home-nav.is-scrolled .home-account-dropdown { top: 66px; }
}

@media (max-width: 430px) {
  .home-nav-actions { gap: 8px; }
  .home-account-facts { grid-template-columns: 1fr; }
  .home-account-dropdown { max-height: calc(100dvh - 84px); overflow-y: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .home-account-dropdown { animation: none; }
  .home-account-trigger { transition: none; }
}
