/* Isolate tinting to the artwork: the user's photo is never filtered. */
.avatar[data-frame-tier]:not([data-frame-tier="none"]){overflow:visible;z-index:1}
.avatar .avatar-face{position:absolute;inset:0;width:100%;height:100%;display:grid;place-items:center;overflow:hidden;border-radius:50%;background:inherit;color:inherit}
.avatar .avatar-face .avatar-photo{border-radius:50%}
.avatar[data-frame-tier="simple"]::before{content:"";position:absolute;z-index:4;pointer-events:none;inset:-2px;border:1px solid rgba(34,48,40,.72);border-radius:50%}
.avatar[data-frame-tier="simple"]::after{content:"";position:absolute;z-index:3;pointer-events:none;inset:-2px;padding:4px;border-radius:50%;background:conic-gradient(from 210deg,var(--frame-main) 0deg 64deg,color-mix(in srgb,var(--frame-main) 35%,white) 76deg,color-mix(in srgb,var(--frame-main) 22%,white) 82deg,color-mix(in srgb,var(--frame-main) 35%,white) 88deg,var(--frame-main) 101deg 268deg,color-mix(in srgb,var(--frame-main) 48%,white) 278deg,color-mix(in srgb,var(--frame-main) 30%,white) 282deg,color-mix(in srgb,var(--frame-main) 48%,white) 286deg,var(--frame-main) 298deg 360deg);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
.avatar[data-frame-tier="simple"] .avatar-face::after{content:"";position:absolute;z-index:2;pointer-events:none;inset:2px;border:1px solid rgba(34,48,40,.66);border-radius:50%}
.avatar[data-frame-tier="spectrum"]{--frame-asset:url('./profile-frames/ribbon-v3.png');--art-size:118%;--art-left:-9%;--art-top:-9%}
.avatar[data-frame-tier="blossom"]{--frame-asset:url('./profile-frames/blossom-v5.png');--art-size:124%;--art-left:-12%;--art-top:-12%}
.avatar[data-frame-tier="crown"]{--frame-asset:url('./profile-frames/crown-v3.png');--art-size:150%;--art-left:-25%;--art-top:-32%}
.avatar[data-frame-tier="crown"] .avatar-face{inset:7.5%;width:85%;height:85%}
.avatar .avatar-frame-art{display:block;position:absolute;left:var(--art-left);top:var(--art-top);width:var(--art-size);height:var(--art-size);z-index:4;pointer-events:none;isolation:isolate}
.avatar-frame-art>canvas,.avatar-frame-art>img{display:block;width:100%;height:100%;object-fit:contain}
.avatar[data-frame-color="sage"]{--frame-main:#6b9a83;--frame-soft:#d6e9dc;--frame-light:#e9f3e8;--frame-gradient:conic-gradient(#8fc1a5,#567c72,#a4c7a2,#6b9a83,#8fc1a5)}
.avatar[data-frame-color="rose"]{--frame-main:#bd6e77;--frame-soft:#efd7dd;--frame-light:#f8e9ed;--frame-gradient:conic-gradient(#dca9b5,#aa687e,#edc3c8,#c38392,#dca9b5)}
.avatar[data-frame-color="sky"]{--frame-main:#6e9db4;--frame-soft:#d6e7ee;--frame-light:#e9f3f7;--frame-gradient:conic-gradient(#a9cedc,#5c89a4,#b5d9d9,#6e9db4,#a9cedc)}
.avatar[data-frame-color="lilac"]{--frame-main:#9271b5;--frame-soft:#e6dcef;--frame-light:#f3edfa;--frame-gradient:conic-gradient(#c5adda,#8c7aab,#d9bcdb,#9b88b3,#c5adda)}
.avatar[data-frame-color="gold"]{--frame-main:#b99860;--frame-soft:#eee1c7;--frame-light:#f8eed9;--frame-gradient:conic-gradient(#e5c68d,#a9834d,#efdaad,#b99860,#e5c68d)}
.avatar[data-frame-color="rainbow"]{--frame-main:#9689ae;--frame-soft:#d9e6e1;--frame-light:#f2e8ed;--frame-gradient:conic-gradient(#be8fa7,#c9ad83,#9ebf9f,#89b4c3,#9b9fc7,#be8fa7)}
.frame-editor{margin:0 0 2px;padding:18px;border:1px solid var(--line);border-radius:16px;background:var(--card)}
.frame-editor[hidden]{display:none}
.frame-editor-head{display:flex;justify-content:space-between;align-items:start;gap:12px;margin-bottom:14px}
.frame-editor-head>div{min-width:0;flex:1}.frame-editor-head .btn{flex:none;white-space:nowrap;min-width:48px}
.frame-editor-head strong{font-size:14px}.frame-editor-head p{font-size:11px;line-height:1.5;color:var(--muted);margin:5px 0 0}
.frame-tier-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.frame-tier-option{min-width:0;min-height:112px;display:grid;justify-items:center;align-content:center;gap:5px;padding:10px 4px;border:1px solid var(--line);border-radius:13px;background:var(--card);color:var(--ink);cursor:pointer}
.frame-tier-option[aria-pressed="true"]{border-color:#567b68;background:#edf4ee;box-shadow:0 0 0 1px #567b68 inset}
.frame-tier-option .avatar{width:42px;height:42px;font-size:16px;margin:8px 0 5px}
.frame-tier-option strong{font-size:11px}.frame-tier-option small{font-size:10px;color:var(--muted)}
.frame-color-label{display:block;margin:20px 0 10px;font-size:12px;font-weight:750}
.frame-color-options{display:flex;flex-wrap:wrap;gap:10px}
.frame-color-option{display:flex;align-items:center;gap:7px;min-height:40px;padding:7px 10px;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink);font-size:11px;cursor:pointer}
.frame-color-option[aria-pressed="true"]{border-color:#567b68;background:#edf4ee;font-weight:800}
.frame-color-dot{width:18px;height:18px;border-radius:50%;background:var(--swatch);border:1px solid #4050491f}
.frame-editor-note{font-size:11px;color:var(--muted);line-height:1.6;margin:15px 0 0}
.support-options{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:520px){.support-options{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.frame-editor{padding:14px}.frame-tier-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.frame-tier-option{min-height:96px}.frame-tier-option:last-child{grid-column:1/-1;grid-template-columns:auto auto auto;gap:12px;min-height:72px}.frame-tier-option:last-child .avatar{margin:2px 0}.frame-color-options{gap:7px}.frame-color-option{min-height:38px}}
@media(max-width:520px){#settings-profile .profile-photo-actions .btn{font-size:11px;padding:7px 6px;white-space:nowrap}#settings-profile .profile-photo-actions{gap:5px}}

.frame-tier-option .avatar{margin:16px 8px 12px}
.profile-photo-editor .profile-avatar{margin:10px 6px 6px}
.frame-tier-option:last-child .avatar[data-frame-tier="crown"]{margin:14px 8px 10px}