body.is-account-open {
  overflow: hidden;
}

.account-modal {
  position: fixed;
  inset: 0;
  z-index: 3050;
}

.account-modal[hidden] {
  display: none !important;
}

.account-modal .cdk-overlay-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.account-modal.is-open .cdk-overlay-container {
  pointer-events: auto;
}

.account-modal .cdk-overlay-backdrop {
  position: fixed;
  inset: 0;
  pointer-events: auto;
  background: rgba(0, 0, 0, 0.72);
}

.account-modal .cdk-global-overlay-wrapper {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  pointer-events: none;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.account-modal .account-modal__pane {
  pointer-events: auto;
  width: 100%;
  max-width: 420px;
  min-height: 100%;
  margin: 0 auto;
  background: #1a1a1c;
}

.account-modal__sheet {
  min-height: 100vh;
  padding: 0 0 32px;
  color: #f8f8f8;
  font-family: inherit;
}

.account-modal__header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 8px 88px 8px 16px;
  background: #252327;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.account-modal__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}

.account-modal__header-actions {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
}

.account-modal__header-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background: transparent;
  color: #f8f8f8;
  cursor: pointer;
}

.account-modal__close {
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #d63f17;
  cursor: pointer;
}

.account-modal__close::before {
  content: "\00d7";
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: #f8f8f8;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}

.account-modal__user-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 12px 16px;
  background: #2e2e31;
}

.account-modal__user-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #18856a;
  color: #f8f8f8;
  flex-shrink: 0;
}

.account-modal__user-name {
  flex: 1;
  font-size: 0.9375rem;
  font-weight: 600;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-modal__user-verified {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #18856a;
  position: relative;
}

.account-modal__user-verified::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 46%;
  width: 5px;
  height: 9px;
  margin-left: -3px;
  margin-top: -6px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.account-modal__nav {
  padding: 12px 12px 0;
}

.account-modal__group {
  margin-bottom: 10px;
  border-radius: 8px;
  overflow: hidden;
  background: #323235;
}

.account-modal__item {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 52px;
  padding: 0 16px;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: transparent;
  color: #f8f8f8;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.account-modal__group .account-modal__item:last-child {
  border-bottom: none;
}

.account-modal__item:active {
  background: rgba(255, 255, 255, 0.04);
}

.account-modal__item-label {
  flex: 1;
}

.account-modal__item-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  background-color: #f8f8f8;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

.account-modal__item-icon--grid {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M4 4h7v7H4V4zm9 0h7v7h-7V4zM4 13h7v7H4v-7zm9 0h7v7h-7v-7z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M4 4h7v7H4V4zm9 0h7v7h-7V4zM4 13h7v7H4v-7zm9 0h7v7h-7v-7z'/%3E%3C/svg%3E");
}

.account-modal__item-icon--transfer {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M7 7h10v2H9v2H7V7zm10 10H7v-2h8v-2h2v4z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M7 7h10v2H9v2H7V7zm10 10H7v-2h8v-2h2v4z'/%3E%3C/svg%3E");
}

.account-modal__item-icon--withdraw {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 4l6 6h-4v6h-4v-6H6l6-6z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 4l6 6h-4v6h-4v-6H6l6-6z'/%3E%3C/svg%3E");
}

.account-modal__item-icon--bets {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M4 6h16v12H4V6zm2 2v8h12V8H6zm2 2h8v4H8v-4z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M4 6h16v12H4V6zm2 2v8h12V8H6zm2 2h8v4H8v-4z'/%3E%3C/svg%3E");
}

.account-modal__item-icon--history {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 2a10 10 0 1 0 10 10h-2A8 8 0 1 1 12 4V2zm1 5v5l4 2-.9 1.8L11 13V7h2z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 2a10 10 0 1 0 10 10h-2A8 8 0 1 1 12 4V2zm1 5v5l4 2-.9 1.8L11 13V7h2z'/%3E%3C/svg%3E");
}

.account-modal__item-icon--tx {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M7 7h10v2H9v2H7V7zm10 10H7v-2h8v-2h2v4z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M7 7h10v2H9v2H7V7zm10 10H7v-2h8v-2h2v4z'/%3E%3C/svg%3E");
}

.account-modal__item-icon--mail {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M4 6h16v12H4V6zm2 2v.5l6 4 6-4V8H6zm0 2.8V16h12v-5.2l-6 4-6-4z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M4 6h16v12H4V6zm2 2v.5l6 4 6-4V8H6zm0 2.8V16h12v-5.2l-6 4-6-4z'/%3E%3C/svg%3E");
}

.account-modal__item-icon--bonus {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M20 7h-2.2A2.8 2.8 0 0 0 20 4.2V3h-1v1.2A1.8 1.8 0 0 1 17.2 6H12V4h7v3zM4 7h7V4H4v3zm0 11h16v-3H4v3zm0-5h16V9H4v4z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M20 7h-2.2A2.8 2.8 0 0 0 20 4.2V3h-1v1.2A1.8 1.8 0 0 1 17.2 6H12V4h7v3zM4 7h7V4H4v3zm0 11h16v-3H4v3zm0-5h16V9H4v4z'/%3E%3C/svg%3E");
}

.account-modal__item-icon--settings {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8zm8.9 4a7.9 7.9 0 0 1-.1 1l2 1.5-2 3.5-2.4-1a8 8 0 0 1-1.7 1l-.4 2.6H9.7l-.4-2.6a8 8 0 0 1-1.7-1l-2.4 1-2-3.5 2-1.5a7.9 7.9 0 0 1-.1-1c0-.34.03-.67.1-1L1.5 9.5l2-3.5 2.4 1c.52-.4 1.1-.73 1.7-1l.4-2.6h4.6l.4 2.6c.6.27 1.18.6 1.7 1l2.4-1 2 3.5-2 1.5c.07.33.1.66.1 1z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8zm8.9 4a7.9 7.9 0 0 1-.1 1l2 1.5-2 3.5-2.4-1a8 8 0 0 1-1.7 1l-.4 2.6H9.7l-.4-2.6a8 8 0 0 1-1.7-1l-2.4 1-2-3.5 2-1.5a7.9 7.9 0 0 1-.1-1c0-.34.03-.67.1-1L1.5 9.5l2-3.5 2.4 1c.52-.4 1.1-.73 1.7-1l.4-2.6h4.6l.4 2.6c.6.27 1.18.6 1.7 1l2.4-1 2 3.5-2 1.5c.07.33.1.66.1 1z'/%3E%3C/svg%3E");
}

.account-modal__item-icon--lock {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M7 10V8a5 5 0 0 1 10 0v2h2v10H5V10h2zm2 0h6V8a3 3 0 0 0-6 0v2z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M7 10V8a5 5 0 0 1 10 0v2h2v10H5V10h2zm2 0h6V8a3 3 0 0 0-6 0v2z'/%3E%3C/svg%3E");
}

.account-modal__item-icon--shield {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 2l8 3v6c0 5-3.4 9.4-8 11-4.6-1.6-8-6-8-11V5l8-3zm-1 11.2l5.5-5.5-1.4-1.4L11 10.4 8.9 8.3 7.5 9.7l3.5 3.5z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 2l8 3v6c0 5-3.4 9.4-8 11-4.6-1.6-8-6-8-11V5l8-3zm-1 11.2l5.5-5.5-1.4-1.4L11 10.4 8.9 8.3 7.5 9.7l3.5 3.5z'/%3E%3C/svg%3E");
}

.account-modal__item-icon--help {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'/%3E%3C/svg%3E");
}

.account-modal__item-icon--logout {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M10 3h8v18h-8v-4H8v4H4V3h4v4h2V3zm2 6v6h6l-3-3 1.4-1.4L21 12l-4.6 4.4L15 15l3-3h-6z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M10 3h8v18h-8v-4H8v4H4V3h4v4h2V3zm2 6v6h6l-3-3 1.4-1.4L21 12l-4.6 4.4L15 15l3-3h-6z'/%3E%3C/svg%3E");
}

.account-modal__deposit {
  display: block;
  width: 100%;
  height: 48px;
  margin: 0 0 10px;
  border: none;
  border-radius: 8px;
  background: #18856a;
  color: #f8f8f8;
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
}

.account-modal__deposit:active {
  background: #157a61;
}
