/*
 Alpha Service v5.8.7 — Branding & Profile Polish
 Uses the supplied Alpha artwork as the global brand mark and fixes Discord avatar/menu layout.
 This stylesheet is intentionally isolated so it can be removed/rolled back without touching
 commerce, licensing, Discord runtime or security logic.
*/
:root{
  --alpha-brand-logo:url("/assets/alpha-logo-icon.png");
  --alpha-brand-logo-full:url("/assets/alpha-logo-full.png");
}

/* Global Alpha brand marks */
.brandmark,
.mini-logo,
.logo-orb,
.preview-logo,
.brand > span:first-child,
.cloud-brand > .logo-orb,
.discord-preview .discord-user > span{
  background-color:#080809 !important;
  background-image:var(--alpha-brand-logo) !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
  background-size:cover !important;
  color:transparent !important;
  text-shadow:none !important;
  overflow:hidden !important;
  border:1px solid rgba(239,35,60,.28) !important;
  box-shadow:0 8px 28px rgba(239,35,60,.18) !important;
}

/* Keep the marketplace mockup logo crisp at tiny sizes. */
.mini-logo{
  background-size:cover !important;
}

/* Discord preview avatar should read like a real bot avatar, not a colored letter tile. */
.discord-preview .discord-user > span{
  border-radius:50% !important;
  flex:0 0 40px !important;
  width:40px !important;
  height:40px !important;
}

/* Customer Discord avatars: never allow the long Discord ID to squeeze the image. */
.account-body .profile-avatar,
.account-body .account-avatar,
.account-body .account-badge > span{
  position:relative;
  display:grid !important;
  place-items:center !important;
  overflow:hidden !important;
  flex-shrink:0 !important;
  min-width:0;
  aspect-ratio:1 / 1;
  border-radius:50% !important;
  background:linear-gradient(145deg,#ef233c,#760817);
  color:#fff;
}

.account-body .profile-avatar{
  width:34px !important;
  height:34px !important;
  min-width:34px !important;
  flex:0 0 34px !important;
}
.account-body .profile-avatar.large{
  width:48px !important;
  height:48px !important;
  min-width:48px !important;
  flex:0 0 48px !important;
}
.account-body .account-avatar{
  width:46px !important;
  height:46px !important;
  min-width:46px !important;
  flex:0 0 46px !important;
}
.account-body .account-identity-card > span,
.account-body .account-badge > span{
  width:62px !important;
  height:62px !important;
  min-width:62px !important;
  flex:0 0 62px !important;
}

.account-body .profile-avatar img,
.account-body .account-avatar img,
.account-body .account-badge > span img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  min-width:100% !important;
  max-width:none !important;
  object-fit:cover !important;
  object-position:center !important;
  border-radius:inherit !important;
}

/* Long names / Discord IDs must truncate instead of deforming the avatar. */
.account-body .account-profile{
  min-width:0;
}
.account-body .account-profile > div,
.account-body .profile-menu-head > div,
.account-body .account-identity-card > div{
  min-width:0;
  flex:1 1 auto;
}
.account-body .account-profile b,
.account-body .account-profile small,
.account-body .profile-menu-head b,
.account-body .profile-menu-head small{
  max-width:100% !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}
.account-body .account-profile small{
  display:block;
}

/* Fix the dropdown being painted behind the Welcome / dashboard card. */
.account-body .topbar{
  position:sticky !important;
  top:0 !important;
  z-index:900 !important;
  overflow:visible !important;
  isolation:isolate;
  background:rgba(8,8,9,.975) !important;
  backdrop-filter:blur(22px) saturate(125%) !important;
}
.account-body .topbar nav,
.account-body .account-area,
.account-body .profile-shell{
  position:relative;
  overflow:visible !important;
}
.account-body .account-area,
.account-body .profile-shell{
  z-index:920 !important;
}
.account-body .profile-menu{
  z-index:9999 !important;
  isolation:isolate;
  background:linear-gradient(180deg,rgba(18,18,21,.998),rgba(9,9,11,.998)) !important;
  border-color:rgba(255,255,255,.13) !important;
  box-shadow:0 30px 90px rgba(0,0,0,.78),0 0 0 1px rgba(239,35,60,.05) !important;
  backdrop-filter:blur(30px) saturate(130%) !important;
}
.account-body .profile-menu::before{
  background:#111114 !important;
  z-index:-1;
}
.account-body .account-shell,
.account-body .account-layout,
.account-body .account-content{
  position:relative;
  z-index:1;
}
.account-body .premium-account-hero{
  z-index:1;
}

/* Make the profile trigger look clean when the Discord avatar is circular. */
.account-body .profile-button{
  overflow:hidden;
  min-width:180px;
  background:rgba(17,17,20,.96) !important;
}
.account-body .profile-button[aria-expanded="true"]{
  background:#17171a !important;
}

/* The sidebar profile row should not overflow from long Discord IDs. */
.account-body .account-sidebar{
  min-width:0;
  overflow:visible;
}
.account-body .account-profile{
  overflow:hidden;
}
.account-body .account-profile > div{
  overflow:hidden;
}

/* Mobile dropdown remains on top of all account content. */
@media(max-width:780px){
  .account-body .topbar{z-index:1200 !important}
  .account-body .profile-menu{
    z-index:1300 !important;
    right:12px !important;
    width:min(350px,calc(100vw - 24px)) !important;
  }
  .account-body .profile-button{
    min-width:46px;
    width:46px;
  }
}

/* v5.8.8 — Profile dropdown avatar hardening.
   The dropdown avatar must render exactly like the profile trigger avatar.
   Absolute positioning prevents generic img/flex rules from squeezing it. */
.profile-menu-head > .profile-avatar.large,
.account-body .profile-menu-head > .profile-avatar.large,
.store-body .profile-menu-head > .profile-avatar.large {
  position: relative !important;
  display: block !important;
  box-sizing: border-box !important;
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  min-height: 52px !important;
  max-width: 52px !important;
  max-height: 52px !important;
  flex: 0 0 52px !important;
  aspect-ratio: 1 / 1 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  border-radius: 14px !important;
  line-height: 52px !important;
  text-align: center !important;
  background: linear-gradient(145deg,#ef233c,#760817) !important;
}

.profile-menu-head > .profile-avatar.large > img,
.account-body .profile-menu-head > .profile-avatar.large > img,
.store-body .profile-menu-head > .profile-avatar.large > img {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: inherit !important;
  object-fit: cover !important;
  object-position: 50% 50% !important;
  transform: none !important;
  flex: none !important;
}

/* Keep the small trigger avatar equally deterministic on every storefront/account page. */
.profile-button .profile-avatar {
  position: relative !important;
  display: block !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  max-width: 34px !important;
  max-height: 34px !important;
  flex: 0 0 34px !important;
  aspect-ratio: 1 / 1 !important;
  padding: 0 !important;
  overflow: hidden !important;
}
.profile-button .profile-avatar > img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: inherit !important;
  transform: none !important;
}