/* Compact profile editor. Shared page headers, returns and mobile chrome stay
   in charge of the outer shell; these rules apply only while this form exists. */
#profileContent:has(> .pe-editor) {
  padding: 12px 20px 28px;
  background: #ffffff;
  color: #181818;
  scroll-padding-block: 20px;
}
.pe-editor {
  width: 100%;
  max-width: 720px;
  min-width: 0;
  margin-inline: auto;
}
.pe-avatar-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  padding: 16px 0 20px;
  text-align: center;
}
.pe-portrait { position: relative; flex: none; width: 96px; height: 96px; }
.pe-avatar-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  overflow: hidden;
  border-radius: 50%;
  background: #f7f7f7;
  color: #181818;
  font-size: 26px;
  font-weight: 600;
  line-height: 1;
}
.pe-avatar-preview > img { display: block; width: 100%; height: 100%; object-fit: contain; }
.pe-avatar-preview.has-upload > img { object-fit: cover; }
.pe-avatar-choose {
  position: absolute;
  right: -8px;
  bottom: -6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.pe-avatar-choose::before {
  position: absolute;
  inset: 6px;
  border: 1px solid #e4e4e4;
  border-radius: 50%;
  background: #ffffff;
  content: "";
}
.pe-avatar-choose > img { position: relative; display: block; width: 18px; height: 18px; }
.pe-avatar-note { max-width: 28em; margin: 12px 0 0; color: #686868; font-size: 12px; line-height: 20px; overflow-wrap: anywhere; }
.pe-avatar-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.pe-avatar-reset {
  min-width: 44px;
  min-height: 48px;
  margin: 0;
  padding: 10px 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #686868;
  font-size: 14px;
  font-weight: 600;
  line-height: 24px;
  cursor: pointer;
}
.pe-form { min-width: 0; margin: 0; }
.pe-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 64px;
  border-bottom: 1px solid #eeeeee;
}
.pe-label { flex: none; width: 76px; margin: 0; color: #181818; font-size: 14px; font-weight: 600; line-height: 22px; }
#profileContent .pe-name-input {
  flex: 1;
  width: auto;
  min-width: 0;
  min-height: 48px;
  height: 48px;
  margin: 0;
  padding: 12px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #181818;
  box-shadow: none;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}
#profileContent .pe-name-input::placeholder { color: #686868; opacity: 1; }
.pe-row-action {
  display: flex;
  align-items: center;
  flex: 1;
  gap: 10px;
  min-width: 0;
  min-height: 48px;
  margin: 0;
  padding: 8px 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #686868;
  font-size: 14px;
  font-weight: 600;
  line-height: 24px;
  text-align: left;
  cursor: pointer;
}
.pe-row-action > span:not(.pe-role-art) { min-width: 0; overflow-wrap: anywhere; }
.pe-role-art { display: flex; align-items: center; justify-content: center; flex: none; width: 34px; height: 38px; }
.pe-role-art:empty { display: none; }
.pe-role-art > img { display: block; width: 100%; height: 100%; object-fit: contain; }
.pe-row-chevron { display: block; flex: none; width: 7.5px; height: 14.16px; margin-left: auto; opacity: .5; }
.pe-id-row { gap: 10px; }
.pe-id { flex: 1; min-width: 0; padding-block: 12px; color: #686868; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; line-height: 20px; white-space: normal; overflow-wrap: anywhere; }
.pe-copy { display: inline-flex; align-items: center; justify-content: center; flex: none; min-width: 44px; min-height: 48px; margin: 0; padding: 10px 2px; border: 0; border-radius: 10px; background: transparent; color: #181818; font-size: 14px; font-weight: 600; line-height: 24px; cursor: pointer; }
.pe-cookie-note { margin: 20px 0 0; color: #686868; font-size: 12px; line-height: 20px; overflow-wrap: anywhere; }
.pe-footer { margin-top: 24px; }
.pe-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 48px;
  margin: 0;
  padding: 11px 20px;
  border: 1px solid #e4e4e4;
  border-radius: 999px;
  background: #ffffff;
  color: #181818;
  font-size: 14px;
  font-weight: 600;
  line-height: 24px;
  text-align: center;
  cursor: pointer;
}
.pe-submit { width: 100%; border-color: #181818; background: #181818; color: #ffffff; }
.pe-avatar-save { min-width: 128px; border-color: #d5fa44; background: #d5fa44; }
.pe-button:disabled, .pe-avatar-reset:disabled { opacity: .5; cursor: wait; }
.pe-avatar-save.hidden,
#avatarFile[hidden] { display: none; }
.pe-editor button:focus-visible,
#profileContent .pe-name-input:focus-visible { outline: 2px solid #181818; outline-offset: 3px; }

@media (hover: hover) {
  .pe-avatar-choose:hover::before { border-color: #181818; }
  .pe-row-action:hover, .pe-avatar-reset:hover, .pe-copy:hover { color: #181818; background: #f7f7f7; }
  .pe-submit:not(:disabled):hover { background: #333333; border-color: #333333; }
  .pe-avatar-save:not(:disabled):hover { background: #cbee3e; border-color: #cbee3e; }
}
@media (prefers-reduced-motion: no-preference) {
  .pe-button { transition: background-color .18s, border-color .18s, transform .18s; }
  .pe-button:not(:disabled):active { transform: scale(.98); }
}