/* The ring sits outside the photo; only the photo itself is circularly cropped. */
.avatar-frame-host.has-avatar-frame { position: relative; overflow: visible !important; isolation: isolate; }
.avatar-frame-host.has-avatar-frame > img { border-radius: 50%; }
.avatar-frame-host.has-avatar-frame::after { content: ''; position: absolute; inset: -14.1%; background: var(--avatar-frame-image) center/contain no-repeat; pointer-events: none; z-index: 1; }
/* Reserve the framed layout even when no frame is selected, so photos and
   adjacent text do not jump during try-on or a live identity update. */
.community-avatar { margin: 5px; }
.community-avatar.is-large { margin: 12px; }
.comment-avatar { margin: 5px; }
.comment-replies .comment-avatar { margin: 4px; }
#sidebar_avatar { margin: 6px; }
#setting_avatar_wrapper { margin: 12px; }
.mobile-account-avatar { margin: 8px; }
.avatar-frames-settings { --af-text:#302f2b; --af-muted:#7c7b73; --af-line:#e5e1d7; --af-soft:#f5f3ed; --af-accent:#a64e3d; --af-tint:#f6e9e3; --af-button:#9c503f; color:var(--af-text); padding:4px 0 0; }
.avatar-frames-settings *, .avatar-frames-settings *::before, .avatar-frames-settings *::after { box-sizing:border-box; }
.avatar-frames-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 16px; }
.avatar-frames-heading h3 { margin:0; font-size:15px; font-weight:750; }
.avatar-frames-description { margin:5px 0 0; color:var(--af-muted); font-size:12px; line-height:1.7; }
.avatar-frame-preview-label { font-size:11px; color:var(--af-accent); text-align:right; }
.avatar-frame-choices { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; padding:0; margin:0; min-width:0; border:0; }
.avatar-frame-option { position:relative; display:block; min-width:0; cursor:pointer; }
.avatar-frame-option > input, .avatar-frame-sr-only { position:absolute; width:1px; height:1px; padding:0; border:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.avatar-frame-option-content { position:relative; display:flex; flex-direction:column; align-items:center; gap:8px; padding:10px 6px 12px; border:1px solid var(--af-line); border-radius:14px; background:transparent; transition:background .15s,border-color .15s; }
.avatar-frame-option > input:checked + .avatar-frame-option-content { border-color:var(--af-accent); background:var(--af-tint); box-shadow:inset 0 0 0 1px var(--af-accent); }
.avatar-frame-option > input:focus-visible + .avatar-frame-option-content { outline:3px solid var(--af-accent); outline-offset:3px; }
.avatar-frame-option > input:disabled + .avatar-frame-option-content { opacity:.6; cursor:default; }
.avatar-frame-sample { display:grid; place-items:center; width:100%; aspect-ratio:1; max-width:124px; }
.avatar-frame-face { display:flex; align-items:center; justify-content:center; width:78%; height:78%; border-radius:50%; background:var(--af-soft); color:var(--af-accent); font-size:27px; font-weight:700; }
.avatar-frame-face img { width:100%; height:100%; border-radius:50%; object-fit:cover; }
.avatar-frame-option-title { font-size:12px; line-height:1.5; text-align:center; }
.avatar-frame-check { display:none; position:absolute; top:7px; right:7px; width:17px; height:17px; border-radius:50%; background:var(--af-accent); color:#fff; font-size:11px; font-weight:700; text-align:center; line-height:17px; }
.avatar-frame-option > input:checked + .avatar-frame-option-content .avatar-frame-check { display:block; }
.avatar-frame-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:16px; }
.avatar-frame-action-buttons { display:flex; gap:14px; align-items:center; flex-shrink:0; }
.avatar-frame-cancel,.avatar-frame-save { font:inherit; font-size:12px; font-weight:650; cursor:pointer; min-height:38px; border:0; }
.avatar-frame-cancel { padding:6px 0; background:transparent; color:var(--af-accent); }
.avatar-frame-save { padding:8px 16px; border-radius:9px; background:var(--af-button); color:#fff; }
.avatar-frame-save:disabled { opacity:.45; cursor:default; }
.avatar-frame-feedback { min-height:0; margin:9px 0 0; font-size:12px; color:var(--af-muted); line-height:1.6; }
.avatar-frame-feedback:empty { display:none; }
.avatar-frame-feedback.is-error { color:#bb393a; }
.avatar-frames-settings [hidden] { display:none !important; }
body.theme-dark .avatar-frames-settings { --af-text:#eeece5; --af-muted:#b1b3a6; --af-line:#41463d; --af-soft:#2d312c; --af-accent:#e4a58d; --af-tint:#49382f; }
body.style-default:not(.skin-warm-paper) .avatar-frames-settings { --af-text:#1e293b; --af-muted:#64748b; --af-line:#e2e8f0; --af-soft:#f8fafc; --af-accent:#dc343c; --af-tint:#fff1f2; --af-button:#ff4b4b; }
body.style-default.theme-dark:not(.skin-warm-paper) .avatar-frames-settings { --af-text:#f2f2f2; --af-muted:#b0b0b0; --af-line:#3a3a3a; --af-soft:#262626; --af-accent:#ff8585; --af-tint:#40292b; }
body.style-liquid-glass .avatar-frames-settings { --af-text:#1e293b; --af-muted:#536176; --af-line:rgb(160 174 196 / 35%); --af-soft:rgb(238 243 252 / 58%); --af-accent:#cf3549; --af-tint:rgb(255 220 227 / 45%); --af-button:#ff4b4b; }
body.style-liquid-glass.theme-dark .avatar-frames-settings { --af-text:#f1f5f9; --af-muted:#b6c0d1; --af-line:rgb(194 208 231 / 20%); --af-soft:rgb(16 20 31 / 36%); --af-accent:#ffabb7; --af-tint:rgb(148 59 81 / 30%); }
body.theme-dark .avatar-frame-feedback.is-error { color:#f2a09a; }
@media(max-width:600px) { .avatar-frames-heading { align-items:start; } .avatar-frame-preview-label { max-width:105px; } .avatar-frame-choices { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .avatar-frame-sample { max-width:140px; } .avatar-frame-actions { align-items:start; flex-direction:column; } .avatar-frame-action-buttons { align-self:flex-end; } .avatar-frame-save,.avatar-frame-cancel { min-height:44px; } }
@media(prefers-reduced-motion:reduce) { .avatar-frame-option-content { transition:none; } }