/* V101 — /#/main account page.
   Tokens and geometry are lifted from the reference AccountRight component.
   Its root font-size is viewportWidth/26.87 while ours is viewportWidth/10, so
   every rem taken from that source is written here multiplied by 0.37213. */

html.co-quest-dash {
  --acc-page: #232626;
  --acc-card: #323738;
  --acc-tile: #3a4142;
  --acc-raise: #4a5354;
  --acc-aff-head: #374244;

  --acc-brand: #24ee89;
  --acc-brand-alt: #9fe871;
  --acc-brand-deep: #1aa964;
  --acc-gold: #ff9820;
  --acc-gold-soft: #ffdb6c;

  --acc-text: #ffffff;
  --acc-muted: #b3bec1;
  --acc-dim: #849194;

  --acc-divider: rgba(228, 234, 240, 0.098);
  --acc-pill: rgba(255, 255, 255, 0.1);
  --acc-track: rgba(0, 0, 0, 0.2);

  --acc-grad-brand: linear-gradient(90deg, #24ee89, #9fe871);
  --acc-grad-gold: linear-gradient(90deg, #fffd80, #ffdb6c);
  --acc-shadow-brand: 0 0 0.32rem rgba(35, 238, 136, 0.3), inset 0 -0.05333rem #1dca6a;
  --acc-shadow-gold: 0 0 0.22rem rgba(255, 187, 0, 0.38), inset 0 -0.05333rem #ffdb6c;

  /* 1rem / 0.75rem / 0.5rem in reference units */
  --acc-gutter: 0.37213rem;
  --acc-pad: 0.2791rem;
  --acc-gap: 0.2791rem;
  --acc-r: 0.18606rem;
  --acc-r-lg: 0.2791rem;
}

html.co-quest-dash,
html.co-quest-dash body {
  background: var(--acc-page) !important;
}

html.co-quest-dash #app {
  background: var(--acc-page) !important;
  color: var(--acc-text);
}

/* The Vue markup stays mounted so the overlay can forward clicks to it. */
html.co-quest-dash #app .userInfo__container,
html.co-quest-dash #app .totalSavings__container,
html.co-quest-dash #app .financialServices__container,
html.co-quest-dash #app .settingPanel__container,
html.co-quest-dash #app .serviceCenter__container,
html.co-quest-dash #app .serviceCenter-wrap-header {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

/* Old Vue “Do you want to log out?” confirm — never show it. */
html.co-quest-dash .serviceCenter-wrap .dialog,
html.co-quest-dash .serviceCenter-wrap .dialog__outside,
html.co-quest-dash .serviceCenter-wrap .dialog__container {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

html.co-quest-dash #app .userinfo-content {
  position: relative;
  top: 0 !important;
  display: block;
  padding: 0 0 2.4rem !important;
  background: transparent !important;
}

html.co-quest-dash #app .settingPanel__container-items__item.co-menu-hide,
html.co-quest-dash #app .serviceCenter__container-items__item.co-menu-hide {
  display: none !important;
}

.co-acc {
  width: 100%;
  min-width: 0;
  color: var(--acc-text);
  font-size: var(--acc-gutter);
  padding-bottom: 0.93033rem;
}

.co-acc *,
.co-acc *::before,
.co-acc *::after {
  box-sizing: border-box;
}

/* :where() keeps this reset at zero specificity so the component rules below
   can set their own gradient and colour without needing !important. */
:where(.co-acc button) {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.co-acc button:active {
  transform: scale(0.97);
}

.co-acc__sec {
  margin: var(--acc-gap) var(--acc-gutter) 0;
  animation: co-acc-in 0.28s ease both;
}

@keyframes co-acc-in {
  from { opacity: 0; transform: translateY(0.12rem); }
  to { opacity: 1; transform: none; }
}

.co-acc__card {
  background: var(--acc-card);
  border-radius: var(--acc-r);
  padding: var(--acc-pad);
}

/* ---------- 1. Profile banner ---------- */
.co-acc__hero {
  position: relative;
  width: 100%;
  min-height: 3.6rem;
  overflow: hidden;
  cursor: pointer;
}

.co-acc__hero-bg {
  position: absolute;
  inset: 0 0 auto auto;
  z-index: 0;
  width: 100%;
  height: auto;
  display: block;
  pointer-events: none;
}

/* Fades the game art out under the name/ID so the text keeps contrast. */
.co-acc__hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, var(--acc-page) 6%, rgba(35, 38, 38, 0.72) 42%, rgba(35, 38, 38, 0) 78%),
    linear-gradient(0deg, var(--acc-page) 2%, rgba(35, 38, 38, 0) 62%);
  pointer-events: none;
}

.co-acc__hero-body {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--acc-pad);
  padding: 1.10246rem var(--acc-gutter) 0.32rem;
}

.co-acc__hero .co-acc__hero-chev {
  margin-left: auto;
  align-self: center;
  width: 0.37213rem;
  height: 0.37213rem;
  color: var(--acc-muted);
}

.co-acc__avatar {
  flex: none;
  width: 1.48852rem;
  height: 1.48852rem;
  padding: 0.09303rem;
  border-radius: 50%;
  background: var(--acc-tile);
}

.co-acc__avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.co-acc__ident {
  min-width: 0;
  flex: 1 1 auto;
  padding-top: 0.06rem;
}

.co-acc__name {
  margin: 0;
  font-size: 0.46516rem;
  font-weight: 800;
  line-height: 1.15;
  color: var(--acc-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.co-acc__id,
.co-acc__tel {
  display: flex;
  align-items: center;
  gap: 0.08rem;
  margin-top: 0.09303rem;
  font-size: 0.2791rem;
  font-weight: 600;
  color: var(--acc-muted);
  line-height: 1.2;
}

.co-acc__copy {
  display: grid;
  place-items: center;
  width: 0.46516rem;
  height: 0.46516rem;
  padding: 0;
  color: var(--acc-muted);
  flex: none;
}

.co-acc__copy svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: currentColor;
}

.co-acc__hero-chev {
  flex: none;
  align-self: center;
  display: grid;
  place-items: center;
  width: 0.37213rem;
  height: 0.37213rem;
  color: var(--acc-muted);
  padding: 0;
}

.co-acc__hero-chev svg,
.co-acc__pill svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: currentColor;
}

/* ---------- 2. VIP ---------- */
.co-acc__vip {
  position: relative;
  padding: var(--acc-pad);
  border-radius: var(--acc-r-lg);
  background:
    linear-gradient(91deg, rgba(149, 255, 236, 0) 0.53%, rgba(115, 175, 168, 0.2) 98.76%),
    var(--acc-card);
}

.co-acc__vip-top {
  display: flex;
  align-items: center;
  height: 0.46516rem;
}

.co-acc__vip-lv {
  font-size: 0.37213rem;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1;
}

/* Reference tucks the pill against the card edge, flat on its right side. */
.co-acc__pill {
  position: absolute;
  top: 0.18606rem;
  right: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.04rem;
  height: 0.5582rem;
  padding: 0 0.14rem 0 0.2rem;
  border-radius: var(--acc-r-lg) 0 0 var(--acc-r-lg);
  background: var(--acc-pill);
  color: var(--acc-brand);
  font-size: 0.2791rem;
  font-weight: 600;
  white-space: nowrap;
}

.co-acc__pill svg {
  width: 0.2791rem;
  height: 0.2791rem;
}

.co-acc__bar {
  position: relative;
  width: 100%;
  height: 0.18606rem;
  margin-top: 0.2791rem;
  border-radius: var(--acc-r);
  background: var(--acc-track);
}

.co-acc__bar-fill {
  height: 100%;
  border-radius: var(--acc-r) 0 0 var(--acc-r);
  background: var(--acc-brand);
}

.co-acc__bar-dot {
  position: absolute;
  top: 50%;
  width: 0.23258rem;
  height: 0.23258rem;
  margin-left: -0.11629rem;
  transform: translateY(-50%);
  border-radius: 50%;
  background: var(--acc-brand);
}

.co-acc__bar-dot::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.46516rem;
  height: 0.46516rem;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--acc-brand);
  opacity: 0.3;
}

.co-acc__vip-xp {
  margin-top: 0.16rem;
  font-size: 0.2791rem;
  font-weight: 600;
  text-align: right;
  color: var(--acc-text);
}

.co-acc__vip-xp i {
  font-style: normal;
  color: var(--acc-muted);
  text-transform: uppercase;
}

/* ---------- 3. Balance ----------
   Reference rows: `flex items-center py-1`
   Labels: `text-fff font-semibold` (inherit 1rem)
   Values: `text-base font-extrabold` (1rem / 800)
   Both sides are the same size — 1rem × 0.37213. */
.co-acc__wallet {
  font-family: avertastd, avertastd-semibold, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.co-acc__brow {
  display: flex;
  align-items: center;
  padding: 0.09303rem 0;
}

.co-acc__brow-label {
  display: flex;
  align-items: center;
  font-size: 0.37213rem;
  line-height: 0.5582rem;
  font-weight: 600;
  color: #fff;
}

.co-acc__info {
  display: grid;
  place-items: center;
  width: 0.46516rem;
  height: 0.46516rem;
  margin-left: 0.09303rem;
  padding: 0;
  color: #ff9820;
}

.co-acc__info svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: #ff9820;
}

.co-acc__brow-val {
  margin-left: auto;
  font-size: 0.37213rem;
  line-height: 0.5582rem;
  font-weight: 800;
  color: #fff;
}

.co-acc__brow-val--brand { color: #24ee89; }
.co-acc__brow-val--gold { color: #ff9820; }

/* ---------- 4. Deposit / Withdraw ---------- */
/* Reference: `w-full flex items-center justify-between gap-3 mt-2 mb-3` */
.co-acc__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.2791rem;
  margin: 0.18606rem 0 0.2791rem;
}

.co-acc__btn {
  flex: 1 1 0;
  min-width: 0;
  height: 0.93033rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  border-radius: var(--acc-r);
  font-size: 0.37213rem;
  font-weight: 600;
  color: #000;
}

.co-acc__btn svg {
  width: 0.5582rem;
  height: 0.5582rem;
  fill: currentColor;
  flex: none;
}

.co-acc__btn--deposit {
  background-image: var(--acc-grad-brand);
  box-shadow: var(--acc-shadow-brand);
}

.co-acc__btn--withdraw {
  background-image: var(--acc-grad-gold);
  box-shadow: var(--acc-shadow-gold);
}

/* Reference: `flex mt-4 w-full justify-between` — stays inside the same card. */
.co-acc__quick {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 0.37213rem;
}

.co-acc__quick-item {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: 1.48852rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.11rem;
  padding: 0 0.04rem;
}

.co-acc__quick-item svg {
  width: 0.46516rem;
  height: 0.46516rem;
  display: block;
  color: var(--acc-muted);
  fill: currentColor;
}

.co-acc__quick-item span {
  font-size: 0.2791rem;
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.co-acc__dot {
  position: absolute;
  top: 0.3rem;
  left: 50%;
  margin-left: 0.14rem;
  width: 0.13rem;
  height: 0.13rem;
  border-radius: 50%;
  background: var(--acc-brand);
}

/* ---------- 6. Level / Affiliate ---------- */
.co-acc__aff {
  padding: 0;
  overflow: hidden;
}

.co-acc__aff-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.14rem;
  height: 0.856rem;
  padding: 0 var(--acc-pad);
  background: var(--acc-aff-head);
}

.co-acc__aff-lv {
  font-size: 0.32561rem;
  font-weight: 800;
  white-space: nowrap;
}

.co-acc__stars {
  display: flex;
  align-items: center;
  gap: 0.06rem;
}

.co-acc__stars svg {
  width: 0.37213rem;
  height: 0.37213rem;
  display: block;
}

.co-acc__aff-body {
  display: flex;
  padding: 0.2rem var(--acc-pad) 0.2791rem;
}

.co-acc__aff-cell {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.08rem;
}

.co-acc__aff-cell + .co-acc__aff-cell {
  border-left: 1px solid var(--acc-divider);
}

.co-acc__aff-cell i {
  font-style: normal;
  font-size: 0.2791rem;
  color: var(--acc-muted);
}

.co-acc__aff-cell b {
  font-size: 0.37213rem;
  font-weight: 800;
  color: var(--acc-brand);
  font-variant-numeric: tabular-nums;
}

/* ---------- 6b. Live Support (1GO menu row) ---------- */
.co-acc__support {
  display: flex;
  align-items: center;
  gap: 0.22rem;
  width: 100%;
  min-height: 1.28rem;
  padding: 0.28rem var(--acc-pad);
  text-align: left;
}
.co-acc__support svg {
  width: 0.586rem;
  height: 0.586rem;
  flex: none;
  display: block;
}
.co-acc__support span {
  font-size: 0.373rem;
  font-weight: 700;
  line-height: 1.2;
  color: #ffffff;
}

/* ---------- 7. Email ---------- */
.co-acc__email {
  display: flex;
  align-items: center;
  gap: 0.18rem;
  width: 100%;
  text-align: left;
}

.co-acc__email svg {
  width: 0.46516rem;
  height: 0.46516rem;
  flex: none;
  fill: var(--acc-muted);
}

.co-acc__email-copy {
  min-width: 0;
  flex: 1 1 auto;
}

.co-acc__email-copy b {
  display: block;
  font-size: 0.32561rem;
  font-weight: 600;
}

.co-acc__email-copy i {
  display: block;
  margin-top: 0.04rem;
  font-style: normal;
  font-size: 0.2791rem;
  color: var(--acc-gold-soft);
}

.co-acc__email .co-acc__hero-chev {
  color: var(--acc-muted);
}

/* ---------- 8. Gift code ---------- */
.co-acc__gift {
  height: 2.01374rem;
  padding: 0.36107rem 0.44443rem 0.27775rem 0.37498rem;
  border-radius: 0.22221rem;
  background: url("/assets/png/account-gift-code-bg-TeIndKl4.avif") 50% / 100% 100% no-repeat;
}

.co-acc__gift-title {
  margin: 0;
  font-size: 0.33333rem;
  font-weight: 700;
  line-height: 1;
}

.co-acc__gift-form {
  display: flex;
  align-items: center;
  gap: 0.24rem;
  margin-top: 0.28rem;
}

.co-acc__gift-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 0.83326rem;
  padding: 0 0.22rem;
  border: 0.02778rem solid #1dca6a;
  border-radius: 0.16665rem;
  background: rgba(3, 24, 18, 0.35);
  color: #fff;
  font-size: 0.30666rem;
  font-weight: 600;
  outline: none;
}

.co-acc__gift-input::placeholder {
  color: #a9b4b0;
  font-weight: 600;
}

.co-acc__gift-input:focus {
  border-color: #34ed86;
}

.co-acc__gift-btn {
  flex: none;
  width: 1.861rem;
  height: 0.83326rem;
  border-radius: 0.16665rem;
  background-image: var(--acc-grad-brand);
  box-shadow: 0 0 0.16665rem rgba(35, 238, 136, 0.3), inset 0 -0.02778rem #1dca6a;
  color: #000;
  font-size: 0.30666rem;
  font-weight: 700;
}

.co-acc__gift-btn[disabled] {
  opacity: 0.55;
}

/* ---------- 9-10. Promo banners ---------- */
.co-acc__banner {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border-radius: var(--acc-r);
  overflow: hidden;
  line-height: 0;
}

.co-acc__banner img {
  width: 100%;
  height: auto;
  display: block;
}

/* Copy is drawn inside the artwork's own 671x144 coordinate space, so it keeps
   its position and relative size at any width. */
.co-acc__banner-copy {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.co-acc__banner-title {
  fill: #fff;
  font-size: 28px;
  font-weight: 700;
}

.co-acc__banner-sub {
  fill: #feff00;
  font-size: 26px;
  font-weight: 400;
}

.co-acc__brand-copy {
  position: absolute;
  bottom: 55%;
  left: 0;
  width: 100%;
  line-height: 1.1;
}

.co-acc__brand-copy span {
  position: relative;
  left: 0.37213rem;
  font-size: 0.59541rem;
  font-weight: 900;
  color: #feff00;
}

.co-acc__brand-copy span em {
  font-style: normal;
  font-size: 0.37213rem;
  font-weight: 100;
  color: #fff;
}

.co-acc__brand-go {
  position: absolute;
  left: 0.74426rem;
  bottom: 0.18606rem;
  width: 43%;
  height: 0.8559rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.18606rem;
  background-image: var(--acc-grad-brand);
  box-shadow: var(--acc-shadow-brand);
  color: #000;
  font-size: 0.2791rem;
  font-weight: 800;
  line-height: 1;
}

/* ---------- 11. Statistics ---------- */
.co-acc__stats-head {
  display: flex;
  align-items: center;
  gap: 0.1rem;
  width: 100%;
  margin-bottom: 0.22rem;
  padding: 0;
  text-align: left;
  pointer-events: none;
  cursor: default;
}

.co-acc__stats-head svg {
  width: 0.37213rem;
  height: 0.37213rem;
  fill: #fff;
  flex: none;
}

.co-acc__stats-head h3 {
  margin: 0;
  font-size: 0.32561rem;
  font-weight: 800;
}

.co-acc__stats-lead {
  height: 1.62807rem;
  border-radius: var(--acc-r);
  background: var(--acc-tile);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
}

.co-acc__stats-pair {
  display: flex;
  gap: var(--acc-gap);
  margin-top: var(--acc-gap);
}

.co-acc__stats-cell {
  flex: 1 1 0;
  min-width: 0;
  height: 1.62807rem;
  border-radius: var(--acc-r);
  background: var(--acc-tile);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
}

.co-acc__stats-cell i,
.co-acc__stats-lead i {
  font-style: normal;
  font-size: 0.2791rem;
  color: var(--acc-muted);
}

.co-acc__stats-cell b,
.co-acc__stats-lead b {
  font-size: 0.41865rem;
  font-weight: 600;
  color: var(--acc-brand);
  font-variant-numeric: tabular-nums;
}

/* ---------- 12. Community ---------- */
.co-acc__community {
  text-align: center;
  padding: 0.46516rem var(--acc-pad);
}

.co-acc__community h3 {
  margin: 0 0 0.26rem;
  font-size: 0.32561rem;
  font-weight: 600;
}

.co-acc__social {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.16rem;
}

.co-acc__social a {
  display: inline-flex;
  align-items: center;
  gap: 0.09rem;
  height: 0.6rem;
  padding: 0 0.24rem;
  border-radius: 0.11164rem;
  color: #fff;
  font-size: 0.2791rem;
  font-weight: 600;
  text-decoration: none;
}

.co-acc__social a svg {
  width: 0.3rem;
  height: 0.3rem;
  fill: currentColor;
  flex: none;
}

.co-acc__social a:active {
  opacity: 0.86;
}

/* ---------- 13. Sign out ---------- */
.co-acc__signout {
  width: 100%;
  height: 1.17333rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.12rem;
  border-radius: var(--acc-r);
  background: var(--acc-card);
  font-size: 0.37213rem;
  font-weight: 800;
}

.co-acc__signout svg {
  width: 0.5582rem;
  height: 0.5582rem;
  fill: currentColor;
  flex: none;
}

/* Toast for the inline gift-code result. */
.co-acc__toast {
  position: fixed;
  left: 50%;
  bottom: 2.2rem;
  z-index: 9000;
  transform: translateX(-50%);
  max-width: 7.2rem;
  padding: 0.2rem 0.36rem;
  border-radius: var(--acc-r);
  background: rgba(0, 0, 0, 0.86);
  color: #fff;
  font-size: 0.29333rem;
  font-weight: 600;
  text-align: center;
  pointer-events: none;
}