.account-avatar.avatar-edit-trigger { padding: 0; cursor: pointer; color: #17565c; }
.avatar-face { display: grid; place-items: center; overflow: hidden; width: 100%; height: 100%; border-radius: inherit; }
.account-avatar.avatar-edit-trigger > .avatar-face { position: static; color: inherit; text-shadow: none; }
.avatar-face img, .avatar-face canvas { display: block; width: 100%; height: 100%; object-fit: cover; }
.account-avatar.avatar-edit-trigger > .avatar-pencil {
  display: grid; place-items: center; top: auto; right: -6px; bottom: -5px; width: 25px; height: 25px;
  border-radius: 50%; border: 1px solid #ffdf93; background: #fff0c8; color: #164d55; font: bold 15px/1 system-ui; text-shadow: none;
}
.avatar-save-notice { display: block; margin-top: 4px; color: #c3ffdc; font-size: .85rem; }
.avatar-editor {
  margin: 0 0 1rem; padding: clamp(.75rem, 3vw, 1.2rem); scroll-margin: .75rem;
  background: #f2faf2; color: #143f48; border: 1px solid #b4d7cd; border-radius: 20px;
  box-shadow: 0 12px 32px #123e451c;
}
.avatar-editor h3 { margin: 0 0 .7rem; font-size: 1.3rem; }
.avatar-editor-toolbar, .avatar-editor-footer { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.avatar-editor-toolbar { margin-bottom: .9rem; }
.avatar-editor-toolbar button, .avatar-initials {
  border: 1px solid #91b6ad; border-radius: 999px; padding: .45rem .8rem; min-height: 40px;
  color: #174d54; background: #fff; font: inherit; cursor: pointer;
}
.avatar-editor-toolbar button[aria-pressed="true"], .avatar-initials[aria-pressed="true"] {
  color: #fff; background: #185e65; border-color: #185e65;
}
.avatar-editor-layout { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 1rem; align-items: start; }
.avatar-editor-preview { text-align: center; font-weight: bold; }
.avatar-editor-preview .avatar-face {
  height: auto; aspect-ratio: 1; margin-bottom: .3rem; border: 1px solid #a5cab7; border-radius: 22px;
  background: linear-gradient(145deg,#e2f4d9,#aadbd0); font-size: 2rem;
}
.avatar-guide-grid, .avatar-field-grid { display: grid; gap: .45rem; }
.avatar-guide-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.avatar-guide {
  display: grid; justify-items: center; align-content: start; gap: .12rem; min-width: 0; padding: .42rem .18rem;
  border: 2px solid #d0e5db; border-radius: 12px; background: #fff; color: #143f48; cursor: pointer; font: inherit;
}
.avatar-guide[aria-pressed="true"] { border-color: #267972; background: #d3efe1; }
.avatar-guide img { width: min(100%, 54px); aspect-ratio: 1; object-fit: cover; border-radius: 9px; background: #e5f0e5; }
.avatar-guide small { color: #3d6266; text-align: center; overflow-wrap: anywhere; }
.avatar-field-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.avatar-field-grid label { display: grid; gap: .22rem; min-width: 0; font-weight: bold; }
.avatar-field-grid select {
  width: 100%; min-height: 40px; padding: .35rem; border: 1px solid #91b6ad; border-radius: 8px;
  color: #143f48; background: #fff; font: inherit; font-weight: normal;
}
.avatar-initials { margin-top: .55rem; }
.avatar-editor-footer { justify-content: flex-end; margin-top: .85rem; }
.avatar-editor-status { flex: 1 1 10rem; margin: 0; color: #923a30; }
.avatar-editor-status:empty { display: none; }
.avatar-editor :is(button, select):focus-visible, .avatar-edit-trigger:focus-visible { outline: 3px solid #bd8c25; outline-offset: 2px; }
@media (max-width: 550px) {
  .avatar-editor-layout { grid-template-columns: minmax(0, 1fr); gap: .6rem; }
  .avatar-editor-preview { width: 84px; justify-self: center; }
}
@media (max-width: 360px) {
  .avatar-guide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}