@layer pages {
  .member-avatar-img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; border-radius: inherit; }
  .account-btn, #user-avatar, .profile-photo-picker .avatar { position: relative; overflow: hidden; }
  .profile-owner-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
  .profile-bio { font-size: .875rem; line-height: 1.6; color: var(--muted-foreground); white-space: pre-wrap; overflow-wrap: anywhere; }
  .member-dialog { position: fixed; margin: auto; inline-size: min(28rem,calc(100% - 2rem)); max-block-size: calc(100dvh - 2rem); overflow-y: auto; padding: 1.5rem; border: 1px solid var(--border); border-radius: .875rem; background: var(--background); color: var(--foreground); box-shadow: var(--shadow-md); }
  .member-dialog::backdrop { background: rgb(0 0 0 / .75); }
  .member-dialog h2 { font-size: 1.125rem; font-weight: 600; letter-spacing: -.025em; padding-inline-end: 2rem; }
  .member-dialog-description { font-size: .875rem; color: var(--muted-foreground); margin-block: .375rem 1.25rem; line-height: 1.5; }
  .member-close { position: absolute; inset-block-start: .5rem; inset-inline-end: .5rem; }
  .member-dialog label { display: block; font-size: .875rem; font-weight: 500; margin-block-end: .5rem; }
  .member-dialog .input { min-block-size: 2.5rem; }
  .member-dialog textarea.input { block-size: auto; resize: vertical; padding: .75rem; line-height: 1.5; }
  .member-dialog small { display: block; font-size: .75rem; color: var(--muted-foreground); margin-block-start: .5rem; }
  .member-dialog-actions { display: flex; justify-content: flex-end; gap: .75rem; border-block-start: 1px solid var(--border); padding-block-start: 1rem; margin-block-start: 1.25rem; }
  .member-dialog-actions .btn.ghost { padding-inline: 1rem; }
  .current-email { font-size: .8125rem; color: var(--muted-foreground); margin-block-end: 1rem; overflow-wrap: anywhere; }
  .current-email strong { display: block; color: var(--foreground); font-weight: 500; margin-block-start: .25rem; }
  .member-note, .member-status { font-size: .75rem; color: var(--muted-foreground); line-height: 1.6; margin-block-start: 1rem; }
  .member-status:empty { display: none; }
  #email-code-hint { margin-block-end: 1rem; font-size: .8125rem; line-height: 1.5; overflow-wrap: anywhere; }
  .profile-photo-field { display: flex; gap: 1rem; align-items: center; margin-block: 1rem 1.5rem; }
  .profile-photo-field strong { font-size: .875rem; font-weight: 500; }
  .profile-photo-field p { font-size: .75rem; color: var(--muted-foreground); margin-block-start: .375rem; }
  .member-dialog .profile-photo-picker { position: relative; display: block; flex-shrink: 0; margin: 0; cursor: pointer; }
  .profile-photo-picker .avatar { --size: 4.5rem; }
  .profile-photo-picker .avatar > .icon { inline-size: 55%; block-size: 55%; }
  .profile-photo-picker input { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; opacity: 0; cursor: pointer; }
  .profile-photo-picker:focus-within { outline: 2px solid var(--ring); outline-offset: 3px; border-radius: 50%; }
  .photo-camera { position: absolute; inset-inline-end: 0; inset-block-end: 0; padding: .25rem; border: 1px solid var(--border); border-radius: 50%; background: var(--background); display: grid; place-items: center; }
  .photo-camera .icon { inline-size: .75rem; block-size: .75rem; }
  .bio-label { display: flex; align-items: center; justify-content: space-between; margin-block-start: 1.5rem; }
  .bio-label output { color: var(--muted-foreground); font-size: .75rem; }
  .settings-page { padding: 2rem 1rem 4rem; }
  .settings-wrap { max-inline-size: 40rem; margin-inline: auto; }
  .settings-wrap > h1 { font-size: 1.5rem; font-weight: 600; letter-spacing: -.03em; }
  .settings-lead { font-size: .875rem; color: var(--muted-foreground); margin-block: .5rem 1.5rem; }
  .settings-card, .settings-signin { padding: 1.5rem; border: 1px solid var(--border); border-radius: .875rem; box-shadow: var(--shadow-sm); }
  .settings-card h2, .settings-signin h2 { font-size: 1rem; font-weight: 500; }
  .settings-description, .settings-signin p { font-size: .875rem; color: var(--muted-foreground); line-height: 1.5; margin-block: .375rem 1.25rem; }
  .preference-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding-block: .75rem; cursor: pointer; }
  .preference-row strong { font-size: .875rem; font-weight: 500; }
  .preference-row small { display: block; color: var(--muted-foreground); font-size: .875rem; line-height: 1.5; margin-block-start: .25rem; }
  .family-row { border-block-end: 1px solid var(--border); padding-block: .25rem 1.25rem; margin-block-end: .5rem; }
  .preference-switch { appearance: none; inline-size: 2.75rem; block-size: 1.5rem; flex-shrink: 0; border-radius: 2rem; background: var(--border); padding: 2px; cursor: pointer; transition: background .15s; }
  .preference-switch::before { content: ''; display: block; inline-size: 1.25rem; block-size: 1.25rem; border-radius: 50%; background: var(--background); box-shadow: var(--shadow-sm); transition: translate .15s; }
  .preference-switch:checked { background: var(--primary); }
  .preference-switch:checked::before { translate: 1.25rem 0; background: var(--primary-foreground); }
  [dir=rtl] .preference-switch:checked::before { translate: -1.25rem 0; }
  .preference-switch:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; }
  @media (width < 640px) { .settings-card { padding: 1.25rem; } .profile-owner-actions > .btn { flex: 1; } }
}

/* Settings: avatar picker */
@layer pages {
  .avatar-card { margin-block-end: 1rem; }
  .avatar-card-head { display: flex; align-items: center; gap: 1rem; margin-block-end: 1rem;
    & .avatar { position: relative; overflow: hidden; --size: 3.5rem; }
    & .settings-description { margin-block-end: 0; } }
  .avatar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(3.5rem, 1fr)); gap: .625rem; border: 0; padding: 0; margin: 0; }
  .avatar-option {
    position: relative; display: block; aspect-ratio: 1; border-radius: 50%; cursor: pointer;
    background: var(--muted); box-shadow: 0 0 0 1px var(--border);
    transition: box-shadow .15s, scale .15s var(--ease);
    & input { position: absolute; opacity: 0; pointer-events: none; }
    & img { inline-size: 100%; block-size: 100%; border-radius: 50%; object-fit: cover; }
    &:hover { scale: 1.06; }
    &:has(input:focus-visible) { box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--ring); }
    &:has(input:checked) { box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--brand); }
  }
}