.account-menu-trigger {
  position: relative;
  display: grid;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(23, 20, 47, .22);
  border-radius: 50%;
  color: #17142f;
  background: rgba(255, 255, 255, .76);
  cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease, transform .18s ease;
}
.account-menu-trigger:hover,
.account-menu-trigger[aria-expanded="true"] { border-color: #17142f; background: #fff; transform: translateY(-1px); }
.account-menu-trigger:focus-visible { outline: 3px solid rgba(104, 73, 246, .2); outline-offset: 3px; }
.account-menu-trigger svg { width: 21px; height: 21px; }
.support-link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  border: 1px solid rgba(23, 20, 47, 0.3);
  border-radius: 999px;
  color: #17142f !important;
  background: rgba(255, 255, 255, 0.72) !important;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 160ms ease, border-color 160ms ease, background-color 160ms ease;
}
.support-link:hover {
  border-color: #17142f;
  background: #fff !important;
  transform: translateY(-1px);
}
.support-link:focus-visible {
  outline: 3px solid rgba(103, 65, 255, 0.24);
  outline-offset: 2px;
}
@media (max-width: 760px) {
  .support-link {
    min-height: 40px;
    padding: 0 12px;
    font-size: 12px;
  }
}

.account-popover {
  position: fixed;
  z-index: 140;
  top: 74px;
  right: clamp(14px, 5vw, 76px);
  width: min(360px, calc(100vw - 28px));
  padding: 10px;
  border: 1px solid rgba(23, 20, 47, .12);
  border-radius: 22px;
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 24px 70px rgba(35, 26, 78, .18);
  backdrop-filter: blur(20px);
}
.account-popover-head { padding: 13px 14px 10px; }
.account-popover-head b { display: block; font-size: 17px; }
.account-popover-head span { display: block; margin-top: 4px; color: #6b657c; font-size: 12px; line-height: 1.4; }
.account-menu-item {
  display: grid;
  width: 100%;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  min-height: 58px;
  padding: 9px 12px;
  border: 0;
  border-radius: 14px;
  color: #17142f;
  background: transparent;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.account-menu-item:hover { background: #f5f2ff; }
.account-menu-item > span:first-child { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 11px; background: #efebff; font-size: 17px; }
.account-menu-item b { display: block; font-size: 14px; }
.account-menu-item small { display: block; margin-top: 3px; color: #777086; font-size: 11px; line-height: 1.35; }
.account-menu-status { min-height: 18px; margin: 6px 12px 4px; color: #4d7f67; font-size: 11px; line-height: 1.4; }

.share-dialog {
  width: min(520px, calc(100% - 28px));
  padding: 0;
  border: 0;
  border-radius: 28px;
  color: #17142f;
  background: #fff;
  box-shadow: 0 35px 110px rgba(22, 17, 48, .3);
}
.share-dialog::backdrop { background: rgba(18, 14, 42, .5); backdrop-filter: blur(7px); }
.share-dialog-inner { padding: 30px; }
.share-dialog-close { position: absolute; top: 16px; right: 16px; display: grid; width: 40px; height: 40px; place-items: center; border: 0; border-radius: 50%; color: #17142f; background: #f2effa; font-size: 25px; cursor: pointer; }
.share-dialog-kicker { margin: 0 52px 8px 0; color: #6849f6; font-size: 12px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.share-dialog h2 { margin: 0; font-family: "Speli Display", "Speli Sans", Arial, sans-serif; font-size: clamp(34px, 6vw, 50px); line-height: 1; letter-spacing: -.045em; }
.share-dialog-subtitle { margin: 12px 0 22px; color: #6a647a; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.share-dialog-options { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.share-dialog-options a,
.share-dialog-options button { display: flex; min-height: 54px; align-items: center; gap: 10px; padding: 0 15px; border: 1px solid rgba(23, 20, 47, .12); border-radius: 16px; color: #17142f; background: #fff; font: inherit; font-size: 13px; font-weight: 800; text-decoration: none; cursor: pointer; }
.share-dialog-options a:hover,
.share-dialog-options button:hover { border-color: rgba(104, 73, 246, .45); background: #f8f6ff; }
.share-dialog-options i { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 9px; color: #fff; background: #6849f6; font-style: normal; font-size: 12px; }
.share-dialog-options .telegram i { background: #269ed8; }
.share-dialog-options .whatsapp i { background: #238c55; }
.share-dialog-options .max i { background: #6f4df6; }
.share-dialog-options .copy i { color: #6849f6; background: #ece7ff; }
.share-dialog-status { min-height: 20px; margin: 13px 2px 0; color: #4d7f67; font-size: 12px; }

@media (max-width: 760px) {
  .account-menu-trigger { flex-basis: 40px; width: 40px; height: 40px; }
  .account-popover { top: 66px; right: 10px; }
  .share-dialog-inner { padding: 26px 18px 20px; }
  .share-dialog-kicker { margin-bottom: 18px; }
  .share-dialog-options { grid-template-columns: 1fr; }
}

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