/* 頭像獨立一列，說明長度不再影響下方資料欄位對齊。 */
#memberProfileForm { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 1.25rem 1rem; }
#memberProfileForm > label { grid-column: auto; min-width: 0; }
#memberProfileForm > .member-avatar-upload,
#memberProfileForm > .inline-actions,
#memberProfileForm > .member-result { grid-column: 1 / -1; }
#memberProfileForm > .member-avatar-upload { grid-template-columns: 112px minmax(0, 1fr); align-items: start; gap: 1rem 1.5rem; padding-bottom: 1.5rem; margin-bottom: .25rem; border-bottom: 1px solid var(--line); min-width: 0; }
.member-avatar-details { display: grid; gap: .75rem; min-width: 0; }
#member-avatar { width: 100%; max-width: 100%; min-width: 0; }
#member-avatar::file-selector-button { padding: .45rem .7rem; margin-right: .6rem; border: 1px solid var(--line); border-radius: .3rem; background: var(--surface-soft); color: var(--brand-dark); font: inherit; cursor: pointer; }
#member-avatar-help { display: block; line-height: 1.7; overflow-wrap: anywhere; }
#member-avatar-note { margin: 0; color: var(--brand-dark); line-height: 1.7; }
#member-avatar-note strong { display: block; }

/* 狀態同時用明確文字、底色與左側邊框呈現，避免只靠淡色小字。 */
#member-avatar-feedback,
#member-feedback { margin: 0; padding: .9rem 1rem; border: 1px solid #b8d2c1; border-left: 4px solid #427354; border-radius: .4rem; background: #eef7f0; color: #245035; line-height: 1.65; font-weight: 600; overflow-wrap: anywhere; }
#member-avatar-feedback { grid-column: 1 / -1; border-color: #e6cc93; border-left-color: #9b6b16; background: #fff8e8; color: #725016; }
#member-avatar-feedback.is-error,
#member-feedback.is-error { border-color: #ecc0bb; border-left-color: #a32929; background: #fff1ef; color: #8a2626; }
#member-avatar-feedback:empty,
#memberProfileForm .field-error:empty,
#memberProfileForm > .member-result:not(:has(:not([hidden]))) { display: none; }
#memberProfileForm > .inline-actions { margin-top: .25rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
#member-login-link { margin-top: .75rem; }
#member-account[readonly] { background: #f5f5f5; }
@media (max-width: 640px) {
    #memberProfileForm { grid-template-columns: minmax(0, 1fr); }
    #memberProfileForm > .member-avatar-upload { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
    #memberProfileForm [data-avatar-form] { justify-self: start; }
    #memberProfileForm > .inline-actions { align-items: stretch; }
    #member-save { width: 100%; justify-content: center; }
}