.mobile-account-metric-open { display: none; }
@media (max-width: 860px) {
  #mobile-dashboard-account #mobile-dashboard-signout,
  #mobile-dashboard-account #mobile-dashboard-signout > span { font-weight: 425; }
  #mobile-dashboard-account .mobile-account-action-icon { color: #c9550c; }
  #mobile-dashboard-account .mobile-account-action-row > span:nth-child(2),
  #mobile-dashboard-account .mobile-account-action-copy strong {
    font-size: 15px; font-weight: 475; line-height: 1.1;
  }
  #mobile-dashboard-account .mobile-account-action-icon svg {
    fill: none; stroke: currentColor; stroke-width: 1.4;
    stroke-linecap: round; stroke-linejoin: round;
  }
  #mobile-dashboard-account > .mobile-account-buy-credits {
    position: relative; display: block; width: 100%; aspect-ratio: 1995 / 500;
    min-height: 0; padding: 0; border: 1px solid #fff; border-radius: 15px;
    /* Scale uniformly so the circular arrow in the artwork never becomes oval. */
    background: #813700 url('/images/account/buy-credits-glass-v1.webp') center / 103% auto no-repeat;
    background-clip: padding-box;
    box-shadow: none; color: #fff; text-align: left;
  }
  #mobile-dashboard-account > .mobile-account-buy-credits .mobile-account-buy-icon,
  #mobile-dashboard-account > .mobile-account-buy-credits .mobile-account-buy-arrow { display: none; }
  #mobile-dashboard-account > .mobile-account-buy-credits .mobile-account-buy-copy {
    position: absolute; left: 24.5%; right: 17%; top: 23%; display: grid; gap: 5px;
  }
  #mobile-dashboard-account > .mobile-account-buy-credits .mobile-account-buy-copy strong {
    font-size: clamp(15px,4.6vw,19px); line-height: 1.12; font-weight: 700; letter-spacing: -.25px; color: #fff;
  }
  #mobile-dashboard-account > .mobile-account-buy-credits .mobile-account-buy-copy > span {
    font-size: clamp(9.5px,3vw,12px); line-height: 1.3; font-weight: 400; color: #f0ded2;
  }
  #mobile-dashboard-account > .mobile-account-buy-credits:focus-visible { outline: 2px solid #be5000; outline-offset: 3px; }
  #mobile-dashboard-account.mobile-account-detail-open > .mobile-account-buy-credits { display: none; }
}
@media (max-width: 860px) {
  body.mobile-account-dashboard-active:has(#mobile-dashboard-account:not(.hidden)) .page-shell { padding-top: 0 !important; }
  body.mobile-account-dashboard-active:has(#mobile-dashboard-account:not(.hidden)) #mobile-account-dashboard { padding: 20px 0 84px !important; }
  #mobile-dashboard-account { --premium-avatar-size: clamp(74px,22.5vw,94px); padding: 0 12px 18px !important; gap: 12px; }
  #mobile-dashboard-account:before {
    inset: -20px 0 auto; height: clamp(370px,111vw,520px);
    background: url('/images/account/premium-green-background-v1.webp') center clamp(-48px,-11vw,-35px) / 100% auto no-repeat;
    -webkit-mask-image: linear-gradient(#000 0%,#000 78%,transparent 100%);
    mask-image: linear-gradient(#000 0%,#000 78%,transparent 100%);
  }
  #mobile-dashboard-account .mobile-account-profile-card { position: relative; gap: 12px; container-type: inline-size; }
  #mobile-dashboard-account .mobile-account-profile-card:before {
    margin: 0 8px; padding-right: 44px; color: #fff; font-size: clamp(22.4px,6.48vw,28px);
    font-weight: 750; letter-spacing: -.8px; line-height: 1.12; text-shadow: 0 1px 3px #6a2c0012;
  }
  #mobile-dashboard-account .mobile-account-profile-settings {
    top: -2px; right: 7px; width: 42px; height: 42px; padding: 0;
    display: grid; place-items: center; box-sizing: border-box; line-height: 0;
    border: 1px solid #f5a66e26; border-radius: 50%; color: #fff;
    background: linear-gradient(140deg,#bf51001a,#79330014);
    box-shadow: none;
  }
  #mobile-dashboard-account .mobile-account-profile-settings svg { display: block; width: 24px; height: 24px; margin: 0; stroke-width: 2.2; transform-origin: 50% 50%; }
  #mobile-dashboard-account .mobile-account-profile-top {
    grid-template-columns: var(--premium-avatar-size) minmax(0,1fr); gap: clamp(16px,5.2vw,23px);
    padding: 0 8px !important; min-height: var(--premium-avatar-size); align-items: center;
  }
  #mobile-dashboard-account .mobile-account-profile-avatar {
    width: var(--premium-avatar-size); height: var(--premium-avatar-size); padding: 0; overflow: visible;
    border: 2px solid #ffd1b3; border-radius: 50%; background: linear-gradient(135deg,#fffbf9,#f6eae3);
    box-shadow: 0 0 0 2px #e96000,inset 0 0 0 1px #fff,0 0 13px #ffbb8b40;
  }
  #mobile-dashboard-account .mobile-account-profile-avatar-image { inset: 3px; width: calc(100% - 6px); height: calc(100% - 6px); object-fit: cover; }
  #mobile-dashboard-account .mobile-account-profile-avatar:after {
    content: ''; position: absolute; right: 2px; bottom: 6px; width: 12px; height: 12px;
    background: #ff7d23; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 3px #a5450040;
  }
  #mobile-dashboard-account .mobile-account-profile-copy { gap: 10px; }
  #mobile-dashboard-account .mobile-dashboard-account-email { font-size: clamp(15px,4.55vw,20px); font-weight: 450; line-height: 1.25; letter-spacing: -.4px; color: #fff; }
  #mobile-dashboard-account .mobile-account-connected-badge {
    box-sizing: border-box; min-height: 25.2px; min-width: 73.8px; justify-content: center; gap: 8.1px; padding: 0 11.7px;
    font-size: 12.6px; font-weight: 400; color: #fbefe7; border: 1px solid #ff6f0a; border-radius: 999px;
    background: linear-gradient(115deg,#c35000d9,#a04200d9); box-shadow: inset 0 0 5px #ffc79f27;
  }
  #mobile-dashboard-account .mobile-account-connected-badge > span { width: 9px; height: 9px; background: #ffb47f; }
  #mobile-dashboard-account .mobile-account-metrics {
    width: 100%; justify-self: center;
    height: max(60px,calc((100cqw - 6px) * 394 / 1804));
    min-height: 0; grid-template-rows: minmax(0,1fr); margin: 0 0 8px !important;
    transition: width 300ms ease, height 300ms ease, grid-template-columns 300ms ease, margin 300ms ease;
  }
  #mobile-dashboard-account .mobile-account-metric { position: relative; }
  #mobile-dashboard-account .mobile-account-metric:nth-child(-n+2),
  #mobile-dashboard-account.mobile-account-history-open .mobile-account-metric {
    border: 1px solid #f6ba8c80; border-radius: 14px;
    background: radial-gradient(ellipse at 0% 0%,#ffede138,transparent 60%),
      linear-gradient(125deg,#c2520066,#682e0091);
    -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
    box-shadow: inset 0 1px 3px #fff4ec38,inset 0 -1px 4px #ffc69c2b,0 0 5px #ffcda812;
  }
  #mobile-dashboard-account:not(.mobile-account-detail-open) .mobile-account-metric:nth-child(-n+2) { padding: 12px !important; gap: 11px !important; }
  #mobile-dashboard-account .mobile-account-metric:nth-child(2) {
    background: radial-gradient(ellipse at 100% 100%,#ffede130,transparent 60%),
      linear-gradient(125deg,#b54e0066,#682e0091);
  }
  #mobile-dashboard-account .mobile-account-metric-icon {
    width: 44px; height: 46px; flex: 0 0 44px; border-radius: 13px; color: #fff;
    border: 1px solid #ff8c39; background: radial-gradient(ellipse at 12% 0%,#ffa15db8,transparent 70%),linear-gradient(135deg,#ca5500,#753200);
    box-shadow: inset 0 0 5px #ffa96a38,0 2px 5px #4c382920;
  }
  #mobile-dashboard-account .mobile-account-metric-icon svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
  #mobile-dashboard-account .mobile-account-metric-copy { gap: 4px; }
  #mobile-dashboard-account .mobile-account-metric-copy > span { font-size: clamp(8.4px,2.55vw,11px); line-height: 1.15; font-weight: 400; white-space: nowrap; }
  #mobile-dashboard-account .mobile-account-metric-copy strong { font-size: clamp(20px,5.8vw,25px) !important; font-weight: 750; line-height: 1.1; letter-spacing: -.4px; }
  #mobile-dashboard-account .mobile-account-metric-open {
    position: absolute; right: 10px; bottom: 16px; display: grid; place-items: center;
    width: 23px; height: 23px; padding: 5px; border: 1px solid #ebab7e; border-radius: 50%; color: #fff;
    background: radial-gradient(ellipse at 25% 0%,#ffd1b180,transparent 60%),linear-gradient(135deg,#b24e00,#f17821bf);
    box-shadow: inset 0 -2px 4px #ffd3b25c,0 2px 4px #44332526; cursor: pointer;
  }
  #mobile-dashboard-account .mobile-account-metric-open svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
  #mobile-dashboard-account .mobile-account-metric-open:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
  #mobile-dashboard-account.mobile-account-detail-open .mobile-account-metric-open { display: none; }
  #mobile-dashboard-account.mobile-account-detail-open:before { height: clamp(330px,95vw,430px); background-size: 100% 100%; }
  #mobile-dashboard-account.mobile-account-detail-open .mobile-account-profile-card { gap: 10px; }
  #mobile-dashboard-account.mobile-account-detail-open .mobile-account-profile-card:before { margin: 0 8px 6px; font-size: 19.2px; }
  #mobile-dashboard-account.mobile-account-detail-open .mobile-account-profile-top { grid-template-columns: 44px minmax(0,1fr); min-height: 46px; }
  #mobile-dashboard-account.mobile-account-detail-open .mobile-account-profile-avatar { width: 44px; height: 44px; }
  #mobile-dashboard-account.mobile-account-detail-open .mobile-account-profile-avatar:after { width: 9px; height: 9px; right: 0; bottom: 2px; }
  #mobile-dashboard-account.mobile-account-detail-open .mobile-account-profile-copy { gap: 5px; }
  #mobile-dashboard-account.mobile-account-detail-open .mobile-dashboard-account-email { font-size: 15px; }
  #mobile-dashboard-account.mobile-account-detail-open .mobile-account-connected-badge { min-height: 19.8px; min-width: 61.2px; font-size: 10.8px; padding: 0 9px; gap: 6.3px; }
  #mobile-dashboard-account.mobile-account-detail-open .mobile-account-connected-badge > span { width: 6.3px; height: 6.3px; }
  #mobile-dashboard-account.mobile-account-detail-open .mobile-account-metrics { height: 60px; min-height: 0; margin-top: 4px !important; margin-bottom: 4px !important; }
  #mobile-dashboard-account.mobile-account-detail-open:not(.mobile-account-history-open) .mobile-account-metrics {
    width: min(100%,230px);
    grid-template-columns: minmax(0,1fr) 6px minmax(0,1fr) 0px minmax(0,0fr);
  }
  #mobile-dashboard-account.mobile-account-detail-open.mobile-account-referrals-open .mobile-account-metrics { width: min(100%,270px); }
  #mobile-dashboard-account.mobile-account-detail-open .mobile-account-metric-icon { width: 26px; height: 30px; flex-basis: 26px; border-radius: 9px; }
  #mobile-dashboard-account.mobile-account-detail-open .mobile-account-metric-icon svg { width: 17px; height: 17px; stroke-width: 2.2; }
  #mobile-dashboard-account.mobile-account-detail-open .mobile-account-metric-copy > span { font-size: 9px; white-space: normal; }
  #mobile-dashboard-account.mobile-account-detail-open .mobile-account-metric-copy strong { font-size: 20px !important; }
  #mobile-dashboard-account.mobile-account-detail-open .mobile-account-metric-copy { gap: 2px; }
}
@media (max-width: 350px) {
  #mobile-dashboard-account:not(.mobile-account-detail-open) .mobile-account-metric:nth-child(-n+2) { padding: 10px 9px !important; gap: 8px !important; }
  #mobile-dashboard-account:not(.mobile-account-detail-open) .mobile-account-metric-icon { width: 36px; height: 40px; flex-basis: 36px; }
  #mobile-dashboard-account .mobile-account-metric-open { right: 8px; width: 21px; height: 21px; }
}
/* Translucent emerald glass: light catches the corners, while the wallpaper
   remains visible through the surface. Text and controls stay fully opaque. */
@media (max-width: 860px) {
  #mobile-dashboard-account:not(.mobile-account-detail-open) .mobile-account-metrics { min-height: 0; }
  #mobile-dashboard-account:not(.mobile-account-detail-open) .mobile-account-metric:nth-child(-n+2) {
    display: block !important; padding: 0 !important; min-height: 0;
    border: 1px solid #eba16b95; border-radius: 14px;
    border-top-color: #ffe9d9a3; border-left-color: #fecaa6a3;
    background: radial-gradient(ellipse at 0% 0%,#ffede14d,transparent 56%),
      radial-gradient(ellipse at 100% 100%,#fbac7321,transparent 55%),
      linear-gradient(125deg,#c2520066,#682e0091);
    -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
    box-shadow: inset 0 1px 3px #fff4ec48,inset 0 -1px 4px #ffc69c38,0 0 6px #ffcda81a,0 4px 10px #43312414;
  }
  #mobile-dashboard-account:not(.mobile-account-detail-open) .mobile-account-metric:nth-child(2) {
    border-left-color: #eba16b95; border-bottom-color: #ffd3b5a3; border-right-color: #ffd3b5a3;
    background: radial-gradient(ellipse at 100% 100%,#ffede148,transparent 56%),
      radial-gradient(ellipse at 0% 0%,#fbac7326,transparent 55%),
      linear-gradient(125deg,#b54e0066,#682e0091);
  }
  #mobile-dashboard-account:not(.mobile-account-detail-open) .mobile-account-metric:nth-child(-n+2) > .mobile-account-metric-icon:not(.referral-metric-only) {
    position: absolute; display: grid; place-items: center;
    left: 7%; top: 20%; width: 26%; height: 60%; border-radius: 12px;
    background: radial-gradient(ellipse at 0% 0%,#ffb27b45,transparent 65%),linear-gradient(135deg,#eb6300a6,#753100c9);
    box-shadow: inset 0 1px 2px #ffcda92b,0 2px 5px #44322512;
  }
  #mobile-dashboard-account:not(.mobile-account-detail-open) .mobile-account-metric:nth-child(-n+2) > .mobile-account-metric-copy:not(.referral-metric-only) {
    position: absolute; left: 39.3%; right: 5%; top: 28%; gap: 4px;
  }
  #mobile-dashboard-account:not(.mobile-account-detail-open) .mobile-account-metric-copy > span { font-size: clamp(8px,2.55vw,11px); font-weight: 400; line-height: 1.05; letter-spacing: -.1px; }
  #mobile-dashboard-account:not(.mobile-account-detail-open) .mobile-account-metric-copy strong { font-size: clamp(18px,5.4vw,24px) !important; font-weight: 750; line-height: 1; }
  #mobile-dashboard-account:not(.mobile-account-detail-open) .mobile-account-metric-open {
    left: 79.5%; top: 48%; right: auto; bottom: auto; width: 13.3%; height: 30%;
    border: 1px solid #e29b67; padding: 0;
    background: radial-gradient(ellipse at 20% 0%,#ffe8d840,transparent 65%),linear-gradient(135deg,#d55a0099,#b34c00b8);
    box-shadow: inset 0 -1px 2px #ffe7d738;
  }
  #mobile-dashboard-account:not(.mobile-account-detail-open) .mobile-account-metric-open svg { visibility: visible; stroke-width: 3; }
}
@media (max-width: 860px) and (prefers-reduced-motion: reduce) {
  #mobile-dashboard-account .mobile-account-metrics { transition: none; }
}