body.accountProfilePage .avatarFilters{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 12px}
body.accountProfilePage .avatarFilters button{min-height:42px!important;padding:9px 16px!important;border:1px solid #648ca280!important;border-radius:4px!important;background:#10243288!important;color:#c9e5f2!important;font:600 15px/1.3 Rajdhani,sans-serif!important;clip-path:none!important;box-shadow:none!important;cursor:pointer}
body.accountProfilePage .avatarFilters button[aria-pressed=true]{border-color:#80d3ed!important;background:#24516b88!important}
body.accountProfilePage .avatarCatalogCount{font:500 13px/1.5 'Space Grotesk',sans-serif;color:#9bbccd;margin:0 0 16px}
body.accountProfilePage #avatarGrid{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(145px,1fr))!important;gap:14px!important}
body.accountProfilePage #avatarGrid .avatarChoice{display:flex!important;flex-direction:column;gap:8px!important;align-items:stretch!important;min-width:0!important;padding:10px!important;border:1px solid #6a8d9f77!important;border-radius:5px!important;clip-path:none!important;background:#10243288!important;box-shadow:none!important;cursor:pointer}
body.accountProfilePage #avatarGrid .avatarChoice img{display:block!important;width:100%!important;height:auto!important;aspect-ratio:1!important;max-width:none!important;border:1px solid #8dc3db66!important;border-radius:3px;clip-path:none!important}
body.accountProfilePage #avatarGrid .avatarChoice strong{font:600 17px/1.3 Rajdhani,sans-serif!important;color:#e0f1fa!important;letter-spacing:.025em;text-align:left}
body.accountProfilePage #avatarGrid .avatarChoice small{font:400 12px/1.4 'Space Grotesk',sans-serif!important;color:#9bbccd!important;text-align:left}
body.accountProfilePage #avatarGrid .avatarChoice:hover{border-color:#7fd5ef!important;box-shadow:0 0 16px #63cff522!important}
body.accountProfilePage #avatarGrid .avatarChoice.selected{border-color:#9ee7fa!important;box-shadow:inset 0 0 0 1px #79cce4,0 0 18px #63cff52a!important}
body.accountProfilePage .avatarPreview{display:flex!important;align-items:center;gap:20px!important;padding:18px!important;background:#10243266!important;border:1px solid #6a8d9f77!important;clip-path:none!important}
body.accountProfilePage #avatarPreviewImage{display:block!important;position:static!important;flex:0 0 128px;width:128px!important;height:128px!important;max-width:128px!important;aspect-ratio:1!important;border:1px solid #8dc3db!important;border-radius:4px!important;clip-path:none!important}
body.accountProfilePage .avatarPreviewCopy{position:static!important;min-width:0}
body.accountProfilePage .avatarSaveBtn{background:linear-gradient(110deg,#23516b,#112b3d)!important;border:1px solid #78bdd6!important;color:#ddf4ff!important;clip-path:none!important;border-radius:4px}
body.accountProfilePage .avatarChoice:focus-visible,body.accountProfilePage .avatarFilters button:focus-visible{outline:2px solid #94e3fa!important;outline-offset:3px}
@media(max-width:600px){body.accountProfilePage #avatarGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important}body.accountProfilePage #avatarPreviewImage{flex-basis:96px;width:96px!important;height:96px!important;max-width:96px!important}}

/* Keep the member portal compact and contained on phones, on either entry point. */
@media(max-width:700px){
 body.accountProfilePage.themeSite #accountPanel{box-sizing:border-box;width:100%;min-width:0;padding:24px 16px calc(96px + env(safe-area-inset-bottom))!important}
 body.accountProfilePage #accountPanel .accountPageTitle{font-size:clamp(30px,8.5vw,42px)!important;line-height:1.12!important;margin:10px 0!important;overflow-wrap:anywhere}
 body.accountProfilePage #accountUsername{display:block}
 body.accountProfilePage #accountRole{margin:12px 0 20px;line-height:1.5}
 body.accountProfilePage #accountPanel .accountInfoGrid{gap:10px!important;margin:20px 0}
 body.accountProfilePage #accountPanel .accountInfo{box-sizing:border-box;padding:16px 18px!important}
 body.accountProfilePage #accountPanel .accountInfo span{margin-bottom:5px}
 body.accountProfilePage #accountPanel .accountInfo strong{font-size:14px;line-height:1.5}
 body.accountProfilePage #accountPanel .avatarSettings,
 body.accountProfilePage #accountPanel>.messageCenter{box-sizing:border-box;min-width:0;width:100%;margin:20px 0!important;padding:22px 18px!important}
 body.accountProfilePage #accountPanel .avatarSettingsHead{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:0 0 16px}
 body.accountProfilePage #accountPanel .avatarSettingsHead h2{font-size:clamp(24px,6.8vw,30px)!important;line-height:1.15!important;margin:7px 0 0!important}
 body.accountProfilePage #accountPanel .avatarSettingsHead p{font-size:13px;line-height:1.65;margin:0;max-width:100%}
 body.accountProfilePage #accountPanel .avatarPreview{box-sizing:border-box;width:100%;max-width:100%;min-height:0;margin:16px 0;padding:12px!important;gap:12px!important;background-image:none!important}
 body.accountProfilePage #accountPanel #avatarPreviewImage{flex:0 0 64px;width:64px!important;height:64px!important;max-width:64px!important;object-fit:cover}
 body.accountProfilePage #accountPanel .avatarPreviewCopy strong{font-size:18px;letter-spacing:.02em;line-height:1.3;overflow-wrap:anywhere}
 body.accountProfilePage #accountPanel .avatarPreviewCopy :is(span,small){font-size:10px;letter-spacing:.08em;line-height:1.4}
 body.accountProfilePage #accountPanel .avatarFilters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:16px 0 10px}
 body.accountProfilePage #accountPanel .avatarFilters button{min-width:0;min-height:44px!important;padding:9px 8px!important;font-size:14px!important;white-space:normal}
 body.accountProfilePage #accountPanel #avatarGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
 body.accountProfilePage #accountPanel #avatarGrid .avatarChoice{aspect-ratio:auto!important;padding:8px!important;gap:6px!important}
 body.accountProfilePage #accountPanel #avatarGrid .avatarChoice strong{font-size:15px!important;overflow-wrap:anywhere}
 body.accountProfilePage #accountPanel #avatarGrid .avatarChoice small{font-size:11px!important;padding-right:20px}
 body.accountProfilePage #accountPanel .avatarChoice.selected:after{width:18px;height:18px;right:5px;bottom:5px;background:#90d5e8;color:#071722}
 body.accountProfilePage #accountPanel .avatarActions{display:flex;flex-direction:column;align-items:stretch;gap:10px;margin-top:18px}
 body.accountProfilePage #accountPanel .avatarSaveBtn{min-width:0;width:100%;min-height:48px}
 body.accountProfilePage #accountPanel>.messageCenter .messageToolbar{display:flex;flex-direction:column;align-items:stretch;gap:10px;margin:16px 0}
 body.accountProfilePage #accountPanel>.messageCenter .messageComposeButtons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0;width:100%}
 body.accountProfilePage #accountPanel>.messageCenter .messageComposeButtons button{min-width:0;white-space:normal;min-height:44px;padding:9px 6px!important}
 body.accountProfilePage #accountPanel>.messageCenter .messageConversation{min-width:0;min-height:48px;padding:12px 4px}
 body.accountProfilePage #accountPanel>.messageCenter .messageConversation strong{overflow-wrap:anywhere;min-width:0}
}