/* Mobile account home. Desktop panels continue to use styles-v2.css. */
.account-mobile-home,
.account-mobile-subnav { display: none; }
/* Keep obsolete icons hidden if a browser still has the previous HTML cached. */
.account-nav-icon { display: none; }

/* The profile is also reachable after resizing a mobile settings screen. */
.view[data-view="account"][data-account-active-tab="settings"] #profile-form:not(.is-hidden) {
  display: grid !important;
}
.view[data-view="account"] .account-tab-hidden,
.view[data-view="account"] .is-hidden { display: none !important; }

@media (min-width: 981px) {
  .account-dashboard-profile > div:last-child { min-inline-size: 0; }
}

@media (max-width: 980px) {
  .view[data-view="account"].is-active {
    background: radial-gradient(ellipse at 0 120px, #12352e55, transparent 400px), #060e12;
  }
  .view[data-view="account"][data-account-authenticated="true"] {
    /* The fixed header is taller than the shared 72px body reserve. */
    padding-block: clamp(28px, 8vw, 40px) 24px;
  }
  .view[data-view="account"][data-account-authenticated="true"] > .shell {
    display: flex !important;
    flex-direction: column;
    gap: 16px !important;
    inline-size: min(560px, calc(100% - 28px));
  }
  .view[data-view="account"][data-account-authenticated="true"] > .shell > * {
    min-inline-size: 0;
    inline-size: 100%;
  }
  .view[data-view="account"][data-account-authenticated="true"] > .shell > .breadcrumb,
  .view[data-view="account"][data-account-authenticated="true"] > .shell > .section-head,
  .view[data-view="account"] #account-mobile-tabs,
  .view[data-view="account"] #account-overview,
  .view[data-view="account"][data-account-active-tab="overview"] #profile-form,
  .view[data-view="account"][data-account-active-tab="overview"][data-account-authenticated="true"] #account-status {
    display: none !important;
  }
  .view[data-view="account"] #account-mobile-home:not(.is-hidden):not(.account-tab-hidden) {
    display: grid;
    gap: 14px;
  }
  .account-mobile-home {
    --account-mint: #7bddb5;
    --account-gold: #e4c477;
    --account-ivory: #e1e2d6;
    --account-text: #f2f1e8;
    --account-muted: #a3b4b3;
    color: var(--account-text);
  }
  .account-mobile-home button,
  .account-mobile-subnav button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
  .account-mobile-home button:focus-visible,
  .account-mobile-subnav button:focus-visible {
    outline: 2px solid #99efc9;
    outline-offset: 4px;
  }
  .account-icon { inline-size: 24px; block-size: 24px; flex-shrink: 0; }
  .account-profile-card {
    position: relative;
    overflow: hidden;
    padding: 20px 16px 14px;
    border: 1px solid #36554b80;
    border-radius: 22px;
    background:
      radial-gradient(ellipse at 6% 0%, #245d4666, transparent 72%),
      radial-gradient(ellipse at 100% 24%, #86602e1c, transparent 62%),
      linear-gradient(150deg, #102321, #0a151b 90%);
    box-shadow: inset 0 1px 0 #d6ffdf08, 0 12px 32px #0003;
  }
  .account-profile-card__identity { display: flex; align-items: center; gap: 15px; }
  .account-profile-card .account-profile-card__avatar {
    inline-size: 86px;
    block-size: 86px;
    flex: 0 0 86px;
    border-radius: 50%;
    border: 2px solid #bda97899;
    box-shadow: 0 0 0 5px #bda97808, 0 5px 18px #0005;
    background: radial-gradient(circle at 40% 24%, #476951, #173b35 58%, #132c2e);
    color: #e4d5a9;
    font-size: 32px;
    font-weight: 650;
    overflow: hidden;
  }
  .account-profile-card__avatar img { inline-size: 100%; block-size: 100%; object-fit: cover; }
  .account-profile-card__name { flex: 1; min-inline-size: 0; }
  .account-profile-card__name h3 { font-size: clamp(22px, 6.1vw, 28px); line-height: 1.15; letter-spacing: -.035em; overflow-wrap: anywhere; }
  .account-profile-card__name p { margin-block-start: 5px; font-size: 13px; color: var(--account-muted); overflow-wrap: anywhere; }
  .account-tier-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-inline-size: 100%;
    min-block-size: 44px;
    padding: 6px 0;
    border: 0;
    background: transparent;
    color: #92dfb7;
    text-align: start;
    font-size: 11px;
    font-weight: 650;
    line-height: 1.35;
  }
  .account-tier-badge .account-icon { inline-size: 16px; block-size: 16px; }
  .account-tier-badge span { padding: 5px 7px; border-radius: 6px; background: #3cb57816; }
  .account-loyalty-progress { margin-block: 16px 17px; }
  #account-mobile-progress {
    display: block;
    appearance: none;
    inline-size: 100%;
    block-size: 8px;
    overflow: hidden;
    border: 0;
    border-radius: 12px;
    background: #213037;
    accent-color: #6ed8a6;
  }
  #account-mobile-progress::-webkit-progress-bar { background: #213037; border-radius: 12px; }
  #account-mobile-progress::-webkit-progress-value { background: linear-gradient(90deg, #3eac80, #83e3b7); border-radius: 12px; }
  #account-mobile-progress::-moz-progress-bar { background: linear-gradient(90deg, #3eac80, #83e3b7); border-radius: 12px; }
  #account-mobile-progress-note { margin-block-start: 8px; color: #aabdb5; font-size: 12px; line-height: 1.5; }
  .account-profile-edit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    inline-size: 100%;
    min-block-size: 45px;
    padding: 10px;
    border: 1px solid #53666366;
    border-radius: 12px;
    color: #d5dfd9;
    background: #0a151b88;
    font-size: 13px;
    font-weight: 600;
  }
  .account-profile-edit .account-icon { inline-size: 17px; block-size: 17px; }
  .account-mobile-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .account-stat,
  .account-shortcut {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-inline-size: 0;
    border: 1px solid #3c525f55;
    border-radius: 16px;
    background: linear-gradient(145deg, #122027, #0c171e);
    box-shadow: inset 0 1px 0 #e5fcff05, 0 5px 16px #0002;
    color: var(--account-text);
    transition: border-color .15s ease, background .15s ease, transform .15s ease;
  }
  .account-stat { min-block-size: 112px; padding: 13px 5px 11px; gap: 4px; }
  .account-stat__icon { display: grid; place-items: center; margin-block-end: 3px; color: var(--account-gold); }
  .account-stat__icon .account-icon { inline-size: 26px; block-size: 26px; }
  .account-stat--generations .account-stat__icon { color: var(--account-mint); }
  .account-stat--generations .account-icon { fill: #52cda833; }
  .account-stat--premium .account-icon { fill: #e4bd6833; }
  .account-stat strong { max-inline-size: 100%; font-size: 19px; line-height: 1.2; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
  .account-stat--premium strong { font-size: 13px; min-block-size: 23px; display: grid; align-items: center; }
  .account-stat > span:last-child { color: var(--account-muted); font-size: 11px; line-height: 1.3; }
  .account-stat.is-premium-active { border-color: #d9b76580; background: linear-gradient(145deg, #373022, #141d20); }
  .account-stat.is-premium-active strong { color: #f4d591; }
  .account-mobile-load-status { font-size: 12px; color: #b6c4c7; }
  .account-mobile-load-status:empty { display: none; }
  .account-adventures h3 { margin: 5px 0 13px; font-size: 20px; line-height: 1.3; letter-spacing: -.025em; }
  .account-shortcuts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .account-shortcut { min-block-size: 105px; gap: 10px; padding: 13px 4px; }
  .account-shortcut__icon {
    display: grid;
    place-items: center;
    inline-size: 42px;
    block-size: 42px;
    border: 1px solid #ae91462e;
    border-radius: 14px;
    background: radial-gradient(circle at 50% 40%, #b8964521, #040c1126);
    color: var(--account-gold);
  }
  .account-shortcut__icon .account-icon { inline-size: 25px; block-size: 25px; }
  .account-shortcut--ivory .account-shortcut__icon { color: var(--account-ivory); border-color: #a8bfc025; background: #829aa50b; }
  .account-shortcut--mint .account-shortcut__icon { color: var(--account-mint); border-color: #62cda329; background: #53ac9310; }
  .account-shortcut--mint .account-icon { fill: #7bddb529; }
  .account-shortcut > span:last-child { max-inline-size: 100%; font-size: 12px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
  .account-mobile-home button:active { transform: translateY(1px); }
  .account-mobile-help { display: flex; align-items: center; gap: 9px; padding: 8px 6px; min-block-size: 44px; color: #9fbbb4; background: transparent; border: 0; text-align: start; font-size: 12px; }
  .account-mobile-help .account-icon { inline-size: 17px; block-size: 17px; }
  .account-mobile-help .account-icon:last-child { margin-inline-start: auto; }
  .account-mobile-logout { display: flex; align-items: center; justify-content: center; gap: 8px; inline-size: 100%; min-block-size: 44px; padding: 10px 16px; border: 1px solid #53666366; border-radius: 12px; color: #bdc9c6; background: #0a151b88; font-size: 13px; }
  .account-mobile-logout .account-icon { inline-size: 18px; block-size: 18px; }
  .account-mobile-subnav:not(.is-hidden) { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
  .account-mobile-subnav button { display: inline-flex; align-items: center; gap: 3px; min-block-size: 44px; padding: 5px 3px 5px 0; border: 0; background: transparent; color: #8edcb6; font-size: 13px; }
  .account-mobile-subnav h3 { flex: 1; font-size: 19px; line-height: 1.25; }
  #account-mobile-review-hint { flex-basis: 100%; font-size: 13px; color: #b2c3c0; }
  .view[data-view="account"] #profile-form:not(.is-hidden) { scroll-margin-block-start: 88px; }
  .view[data-view="account"][data-account-active-tab="settings"] #profile-form { margin: 0; }
  .view[data-view="account"][data-account-active-tab="models"] #workshop-plan-grid,
  .view[data-view="account"][data-account-active-tab="models"] #workshop-token-shop { display: none !important; }
  .view[data-view="account"][data-account-active-tab="portal"] #workshop-models,
  .view[data-view="account"][data-account-active-tab="portal"] #workshop-model-pager,
  .view[data-view="account"][data-account-active-tab="portal"] .workshop-models-head { display: none !important; }
  @media (hover: hover) {
    .account-stat:hover, .account-shortcut:hover, .account-profile-edit:hover { border-color: #74ba9e80; background-color: #17332e; }
  }
}

@media (max-width: 360px) {
  .account-profile-card { padding: 16px 12px 12px; }
  .account-profile-card__identity { gap: 12px; }
  .account-profile-card .account-profile-card__avatar { inline-size: 66px; block-size: 66px; flex-basis: 66px; }
  .account-tier-badge { font-size: 10px; gap: 3px; }
  .account-mobile-stats, .account-shortcuts { gap: 7px; }
  .account-shortcut > span:last-child { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .account-mobile-home button { transition: none; }
}