.dt-avatar { overflow:hidden; }
.dt-avatar:not(.skip-on-drag) { position:relative; }
.dt-avatar > .dt-avatar-image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:inherit; }
html body #message-header .dt-avatar-image { margin:0; padding:0; border:0; }
html body.dt-avatar-page .formbuttons { display:none; }
html body.dt-avatar-open .content-frame-navigation .buttons { display:none; }
html body.dt-avatar-page .formcontent { padding:28px; }
html body.dt-avatar-page fieldset { max-width:760px; margin:0; padding:0; border:0; }
html body.dt-avatar-page fieldset legend { font:32px/1.25 'DM Serif Display',Georgia,serif; color:var(--dt-text); margin-bottom:24px; }
html body #dt-avatar-profile { border:1px solid var(--dt-line); background:var(--dt-side); border-radius:12px; padding:28px; max-width:720px; font-size:16px; line-height:1.65; }
#dt-avatar-profile p { color:var(--dt-muted); max-width:580px; }
#dt-avatar-profile .dt-avatar-profile-image { position:relative; width:128px; height:128px; border:1px solid var(--dt-avatar-border); border-radius:50%; overflow:hidden; background:var(--dt-avatar-surface); color:var(--dt-avatar-ink); display:grid; place-items:center; font-size:36px; margin:0 0 24px; }
#dt-avatar-preview { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
#dt-avatar-preview[hidden] { display:none; }
#dt-avatar-profile label { display:block; color:var(--dt-text); font-weight:600; margin:18px 0 8px; }
html body #dt-avatar-file { display:block; width:100%; max-width:100%; height:auto; padding:12px; border:1px solid var(--dt-line); border-radius:6px; background:var(--dt-bg); color:var(--dt-text); font:inherit; }
#dt-avatar-file::file-selector-button { border:1px solid var(--dt-active-border); border-radius:4px; background:var(--dt-active-surface); color:var(--dt-active-ink); padding:7px 12px; margin-right:12px; font:inherit; cursor:pointer; }
html body #dt-avatar-profile .custom-file { height:48px; }
html body #dt-avatar-profile .custom-file-input { height:48px; cursor:pointer; }
html body #dt-avatar-profile .custom-file-label { margin:0; height:48px; padding:10px 100px 10px 12px; border:1px solid var(--dt-line); border-radius:6px; background:var(--dt-bg); color:var(--dt-text); font:400 15px/26px 'DM Sans',sans-serif; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
html body #dt-avatar-profile .custom-file-label::after { height:46px; padding:10px 16px; border-left:1px solid var(--dt-line); background:var(--dt-active-surface); color:var(--dt-active-ink); line-height:26px; }
#dt-avatar-profile .dt-avatar-actions { display:flex; flex-wrap:wrap; gap:12px; margin:24px 0 12px; }
html body #dt-avatar-profile button { min-height:46px; padding:10px 20px; border:1px solid var(--dt-active-border); border-radius:6px; font:600 15px/1.5 'DM Sans',sans-serif; cursor:pointer; background:var(--dt-active-surface); color:var(--dt-active-ink); }
html body #dt-avatar-upload { background:var(--dt-orange); border-color:var(--dt-orange); color:#21170e; }
#dt-avatar-profile button:disabled { opacity:.5; cursor:default; }
#dt-avatar-profile :is(button,input):focus-visible { outline:2px solid var(--dt-accent); outline-offset:3px; }
#dt-avatar-profile .custom-file:focus-within .custom-file-label { outline:2px solid var(--dt-accent); outline-offset:3px; }
#dt-avatar-status { min-height:1.65em; font-size:15px; overflow-wrap:anywhere; }
#dt-avatar-status.dt-avatar-error { color:var(--dt-accent); font-weight:600; }
html body .listing tr.dt-profile td.section:before { --dt-icon:url('../icons/identity.svg'); }
@media(max-width:600px) {
  html body.dt-avatar-page .formcontent { padding:20px 16px; }
  html body #dt-avatar-profile { padding:20px; }
  html body.dt-avatar-page fieldset legend { font-size:27px; }
  #dt-avatar-profile .dt-avatar-actions button { flex:1 1 auto; }
}