/* V46 — profile fit: calmer hierarchy and reliable small-phone spacing. */
[data-screen="profile"]{
  padding-top:16px;
  padding-bottom:calc(118px + env(safe-area-inset-bottom));
}

/* The banner is the visual card; the profile itself should not become a huge coloured block. */
.profile-header{
  padding:0 0 11px!important;
  border:1px solid #29384f!important;
  border-radius:19px!important;
  background:#0d131e!important;
  overflow:visible;
}
.profile-banner{
  height:auto!important;
  aspect-ratio:2/1;
  min-height:132px;
  max-height:188px;
  border:0;
  border-radius:18px 18px 0 0!important;
  box-shadow:none;
}
.profile-identity{
  align-items:flex-start;
  gap:12px;
  padding:0 10px;
  margin-top:12px;
}
.profile-identity .profile-avatar{
  width:74px;
  height:74px;
  border-width:3px;
  box-shadow:0 7px 18px #0008;
  /* The portrait only kisses the banner; its centre lines up with name and @handle. */
  margin-top:-22px;
}
.profile-copy{padding:0 0 2px;min-width:0;flex:1}
.profile-copy h1{font-size:22px;line-height:1.06;letter-spacing:-.9px}
.profile-copy>p:not(.bio){font-size:11px;margin:4px 0 0}
.profile-copy .bio{margin:8px 0 0;font-size:12px;line-height:1.42}
.profile-favorite-flavour{
  display:block!important;
  max-width:100%;
  margin:7px 0 0!important;
  padding:0!important;
  overflow:hidden;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:#9eafca!important;
  font:500 10px/1.35 Manrope,system-ui,sans-serif!important;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Cosmetics sit under the bio in one deliberate, even row instead of floating between sections. */
.profile-tag-row{
  margin:11px 10px 0;
  gap:7px;
  min-height:29px;
}
.profile-cosmetic-tag{height:29px;max-width:min(44vw,156px)}

/* Clear tap targets without stretching the three controls beyond the viewport. */
.profile-buttons{
  display:grid!important;
  grid-template-columns:minmax(0,1.2fr) minmax(0,.88fr) 42px;
  gap:8px;
  margin:12px 10px 0!important;
}
.profile-header .edit-profile{
  min-width:0;
  min-height:42px;
  padding:8px 10px;
  border-color:#34445f!important;
  border-radius:13px;
  background:#101827!important;
  color:#eaf0fb!important;
  font-size:10px;
  white-space:nowrap;
}
.profile-header .edit-profile:hover,.profile-header .edit-profile:active{background:#17243a!important}
.profile-header .edit-profile svg{width:15px;height:15px;color:#9bb2e4!important}
.profile-header .profile-share{width:42px;padding:0}

/* The account area is secondary, compact and scroll-safe. */
.profile-menu-details{
  margin:11px 10px 0!important;
  border-color:#27354a!important;
  background:#0b1019!important;
  border-radius:14px;
}
.profile-menu-details>summary{min-height:46px;padding:0 12px!important;color:#dbe4f4!important;font-size:11px!important}
.profile-menu-details>summary>svg:first-child{color:#91a9da!important}
.profile-tools-row{gap:6px!important;margin:0 8px 9px!important}
.profile-tools-row .edit-profile{
  min-height:40px!important;
  padding:7px 9px!important;
  border-color:#2e3b50!important;
  border-radius:11px!important;
  background:#111927!important;
  color:#dce5f5!important;
  font-size:9px!important;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.profile-tools-row .edit-profile svg{color:#9bb2e4!important;flex:none}
.profile-tools-row .support-link{color:#becce7!important}
.developer-tools{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin:0 9px 8px!important;
  padding:8px 0 1px!important;
  border-color:#27354a!important;
}
.developer-tools button{min-width:0;font-size:9px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.developer-tools #close-dev-note{margin-left:auto!important;text-align:right}

[data-screen="profile"] .profile-stats{margin:14px 0 0}
.profile-favorite-summary{
  margin:7px 0 0!important;
  padding:0 2px!important;
  color:#9eafca!important;
  font-size:10px!important;
}
.profile-favorite-summary:before{content:"●";margin-right:6px;color:#8da6d8;font-size:7px;vertical-align:1px}

@media (max-width:390px){
  [data-screen="profile"]{padding-left:14px;padding-right:14px}
  .profile-header{border-radius:17px!important;padding-bottom:9px!important}
  .profile-banner{min-height:120px;border-radius:16px 16px 0 0!important}
  .profile-identity{padding:0 8px;gap:10px;margin-top:11px}
  .profile-identity .profile-avatar{width:68px;height:68px;margin-top:-20px}
  .profile-copy h1{font-size:20px}
  .profile-copy .bio{font-size:11px}
  .profile-tag-row{margin-left:8px;margin-right:8px;gap:5px}
  .profile-cosmetic-tag{height:27px;max-width:43vw}
  .profile-buttons{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr) 40px;gap:6px;margin-left:8px!important;margin-right:8px!important}
  .profile-header .edit-profile{min-height:40px;padding:7px 8px;font-size:9px}
  .profile-header .profile-share{width:40px}
  .profile-menu-details{margin-left:8px!important;margin-right:8px!important}
  .profile-tools-row{gap:5px!important;margin-left:7px!important;margin-right:7px!important}
  .profile-tools-row .edit-profile{padding:7px!important;font-size:8.5px!important}
}

@media (max-width:350px){
  .profile-buttons{grid-template-columns:1fr 40px}
  .profile-buttons #open-cosmetics{grid-column:1;grid-row:2}
  .profile-buttons .profile-share{grid-column:2;grid-row:1 / span 2;height:100%}
  .profile-tools-row{grid-template-columns:1fr!important}
}