.account-avatar{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;flex:none;overflow:hidden;border-radius:var(--radius-avatar);background:var(--surface-tertiary);color:var(--text-secondary);border:1px solid var(--border-strong)}
.account-avatar img{display:block;width:100%;height:100%;object-fit:cover;filter:none}
.avatar-large{width:80px;height:80px}
.avatar-large svg{width:var(--icon-lg);height:var(--icon-lg)}
[data-avatar-trigger-mount]{display:flex;flex:none}
.account-profile-demo{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;background-image:var(--ambient-panel-image)}
.account-profile-identity{display:flex;align-items:center;gap:24px;min-width:0}
.account-profile-identity>div{min-width:0;overflow-wrap:anywhere}
.account-profile-identity p{color:var(--text-secondary);margin-top:4px}
.account-local-note{flex-basis:100%;font-size:14px;color:var(--text-secondary)}
.avatar-collection-preview{display:flex;gap:12px;margin-bottom:16px}
.avatar-collection-preview img{border-radius:var(--radius-avatar);width:64px;height:64px;object-fit:cover}
.avatar-collection-preview~.button{margin-top:20px}
.demo-topbar-actions{align-items:center;gap:8px}
.avatar-editor{padding:0;width:min(880px,calc(100% - 32px));max-height:calc(100dvh - 32px);overflow:auto;overscroll-behavior:contain}
.avatar-editor[open]{display:block}
.avatar-editor .dialog-heading{padding:24px 24px 0;margin:0}
.avatar-editor .eyebrow{margin-bottom:4px}
.avatar-editor h2{font-size:24px;line-height:32px}
.avatar-editor-preview{display:flex;align-items:center;gap:16px;padding:24px;flex-wrap:wrap}
.avatar-editor-preview>div{flex:1;min-width:120px}
.avatar-editor-preview p{font-weight:600;line-height:24px}
.avatar-editor-preview small{color:var(--text-secondary)}
.avatar-source-tabs{display:flex;gap:8px;padding:0 24px;border-bottom:1px solid var(--border-subtle)}
.avatar-source-tabs button{min-height:48px;padding:8px 16px;background:transparent;border:0;border-bottom:3px solid transparent;color:var(--text-secondary);font-size:14px;font-weight:600}
.avatar-source-tabs [aria-selected="true"]{border-bottom-color:var(--action-text);color:var(--action-text)}
.avatar-filter-row{padding:16px 24px}
.avatar-filter-row .segmented{flex-wrap:wrap}
.avatar-options-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;padding:0 24px 24px}
.avatar-option{display:flex;flex-direction:column;gap:8px;align-items:center;padding:8px;border:2px solid transparent;border-radius:var(--radius-md);background:var(--surface-secondary);color:var(--text-secondary);min-width:0}
.avatar-option:hover{background:var(--surface-tertiary);border-color:var(--border-strong)}
.avatar-option[aria-pressed="true"]{border-color:var(--action-text);background:var(--surface-tertiary);color:var(--text-primary)}
.avatar-option>span:last-child{font-size:12px;line-height:16px;overflow-wrap:anywhere}
.avatar-option-image{position:relative;width:100%;max-width:96px;aspect-ratio:1}
.avatar-option img{display:block;width:100%;height:100%;border-radius:var(--radius-avatar);object-fit:cover}
.avatar-option-check{display:none;position:absolute;right:0;bottom:0;padding:2px;border-radius:50%;background:var(--action-primary);color:var(--on-action)}
.avatar-option-check svg{width:var(--icon-sm);height:var(--icon-sm)}
.avatar-option[aria-pressed="true"] .avatar-option-check{display:flex}
.avatar-photo-panel{display:flex;align-items:center;flex-direction:column;gap:16px;padding:32px 24px;text-align:center}
.avatar-photo-panel p{max-width:440px;font-size:14px;color:var(--text-secondary)}
.avatar-upload-icon{padding:16px;background:var(--surface-tertiary);border-radius:var(--radius-lg)}
.avatar-file-label{font-weight:600;font-size:14px}
.avatar-photo-panel input{max-width:100%;font-size:14px;border:1px solid var(--border-strong);border-radius:var(--radius-md);padding:8px;background:var(--surface-primary);color:var(--text-primary)}

.avatar-photo-panel small{max-width:440px;color:var(--text-secondary)}
.avatar-editor-error,.avatar-editor-status{padding:0 24px;font-size:14px}
.avatar-editor-error:not(:empty),.avatar-editor-status:not(:empty){padding-bottom:16px}
.avatar-editor-footer{display:flex;justify-content:space-between;align-items:center;gap:16px;position:sticky;bottom:0;padding:16px 24px;border-top:1px solid var(--border-subtle);background:var(--surface-primary);z-index:1}
.avatar-editor-footer small{max-width:280px;color:var(--text-secondary)}
.avatar-editor-footer .button-row{flex-wrap:nowrap}
@media(max-width:767px){.avatar-options-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.avatar-editor-preview{gap:12px}.avatar-editor-preview .avatar-large{width:64px;height:64px}.avatar-editor-preview>.button{margin-left:auto}.avatar-source-tabs button{padding:8px}.avatar-editor-footer{flex-wrap:wrap}.avatar-editor-footer small{max-width:none;flex-basis:100%}.avatar-editor-footer .button-row{width:100%;justify-content:flex-end}.account-profile-identity{gap:16px}.account-profile-identity h2{font-size:20px;line-height:28px}.topbar{padding-inline:8px;gap:8px}.demo.device-mobile .demo-topbar>span:not(.callout-number){display:none}}
@media(max-width:480px){.avatar-editor .dialog-heading{padding:16px 16px 0}.avatar-editor-preview{padding:16px}.avatar-source-tabs{padding-inline:16px}.avatar-filter-row{padding:16px}.avatar-options-grid{grid-template-columns:repeat(3,minmax(0,1fr));padding:0 16px 16px}.avatar-option{padding:6px}.avatar-editor-footer{padding:16px}.avatar-editor-preview>div{min-width:100px}.avatar-editor-error,.avatar-editor-status{padding-inline:16px}}

/* The supplied Korax artwork includes a black outer matte. Clip that margin only
   in light appearance; do not recolor the character, gradient or personal photos. */
[data-appearance="light"] .korax-avatar-art{clip-path:inset(var(--avatar-art-light-inset) round var(--avatar-art-light-corner))}
[data-appearance="light"] .account-avatar{background:var(--surface-primary)}