/* Billing focus and a denser, touch-first mobile profile. */
@media (min-width: 761px) {
  .desktop-billing-balance {
    background: #065dfd;
    border-color: #065dfd;
    color: #fff;
    box-shadow: 0 18px 48px rgba(6, 93, 253, .24);
  }

  .desktop-billing-balance > span,
  .desktop-billing-balance small { color: rgba(255,255,255,.8); }
  .desktop-billing-balance button { background: #fff; color: #121318; }
}

@media (max-width: 760px) {
  /* The three mobile pages use the title only; it keeps the top line compact. */
  #mobileProjectsPage .m-eyebrow,
  #mobileBillingPage .m-eyebrow,
  #mobileProfilePage .m-eyebrow { display: none; }

  #mobileProjectsPage .m-page-heading,
  #mobileBillingPage .m-page-heading,
  #mobileProfilePage .m-page-heading { min-height: 40px; margin-bottom: 8px; }

  #mobileProfilePage .m-page-heading-row {
    align-items: center;
    justify-content: flex-start;
    gap: 9px;
  }

  #mobileProfilePage .m-page-heading-row h1 { margin: 0; }
  #mobileProfileEditButton { width: 40px; height: 40px; }

  /* Match the visible card width of Billing and Projects. */
  #mobileProfilePage .m-scroll-content { padding: 1px 2px 26px; }
  #mobileProfilePage .m-profile-hero { overflow: visible; }

  .m-mobile-achievements {
    min-height: 36px;
    height: 36px;
    padding: 3px 7px !important;
    align-items: center;
    gap: 7px;
  }

  .m-mobile-achievements button {
    width: 31px !important;
    height: 28px !important;
    min-width: 31px;
    flex-basis: 31px;
    border-radius: 9px !important;
    touch-action: manipulation;
  }

  .m-mobile-achievements button i { font-size: 17px !important; }

  /* During editing the profile hero becomes a compact identity strip. */
  #mobileProfileContent.is-editing .m-profile-hero {
    position: relative;
    min-height: 104px;
    height: 104px;
    overflow: hidden !important;
    border-radius: 22px;
    transition: height 320ms cubic-bezier(.22,1,.36,1), min-height 320ms cubic-bezier(.22,1,.36,1);
  }

  #mobileProfileContent.is-editing .m-profile-cover {
    position: absolute;
    inset: 0;
    height: auto;
    border-radius: inherit;
  }

  #mobileProfileContent.is-editing .m-profile-main {
    position: relative;
    z-index: 1;
    min-height: 104px;
    height: 104px;
    padding: 0 14px;
    display: grid;
    grid-template-columns: 62px minmax(0,1fr);
    grid-template-rows: minmax(0,1fr) auto;
    column-gap: 11px;
    align-items: center;
    background: linear-gradient(90deg, rgba(10,13,20,.46), rgba(10,13,20,.08));
  }

  #mobileProfileContent.is-editing .m-profile-avatar {
    grid-row: 1 / -1;
    width: 62px;
    height: 62px;
    margin: 0;
    border-width: 3px;
  }

  #mobileProfileContent.is-editing .m-profile-main h2 {
    align-self: end;
    margin: 0;
    color: #fff;
    font-size: 20px;
  }

  #mobileProfileContent.is-editing .m-profile-main p {
    align-self: start;
    margin: 1px 0 0;
    color: rgba(255,255,255,.82);
  }

  #mobileProfileContent.is-editing .m-profile-stats { display: none; }
  #mobileProfileContent.is-editing .m-profile-data label { text-align: center; font-size: 12px; }
  #mobileProfileContent.is-editing .m-profile-data input { touch-action: manipulation; }

  .m-field-scrollbar,
  .m-description-scrollbar { top: 19px; }
}