.photo-color-presets button.photo-custom-color-button{width:44px;min-width:44px;gap:0;padding:8px;justify-content:center}.photo-color-presets .photo-custom-color-button i{display:flex;align-items:center;justify-content:center;font-style:normal;font-size:21px}.photo-custom-color-button span{font-size:11px;font-weight:700}
#photoBffControls{border-top:1px solid #eedbeb;padding-top:16px;margin-top:20px}#photoBffControls h3{color:var(--purple)}#photoBffOptions button{margin:6px 6px 0 0;font-size:12px}
#photoStylePicker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:12px 0 20px}#photoStylePicker button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:12px 5px;min-height:88px;border:2px solid #eedff1;border-radius:12px;background:white;font-size:12px}#photoStylePicker button span{line-height:1.3}#photoStylePicker button[aria-pressed=true]{border-color:var(--pink);background:var(--pink-light);color:var(--purple)}
.preview #photoBffControls{flex:0 0 auto;margin-top:12px;padding-top:12px}.preview #photoBffControls h3{margin:0 0 6px;font-size:16px}.preview #photoBffControls .hint{margin:6px 0}.preview #photoBffControls label{margin:8px 0 6px;font-size:12px}
#photoStylePicker{gap:5px;margin:8px 0 14px}#photoStylePicker button{min-height:58px;padding:5px 3px;gap:4px;border-radius:8px;font-size:11px}#photoStylePicker button svg{width:24px;height:24px}.photo-glow-motif-buttons{gap:5px;margin:6px 0}.photo-glow-motif-buttons button{width:36px;height:36px;min-height:36px;padding:6px;border-radius:8px}.photo-glow-motif-buttons button svg{width:20px;height:20px}
#view.bff-movable{cursor:grab;touch-action:none}#view.bff-dragging{cursor:grabbing}
#glowPresets{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:8px 0 14px}#glowPresets button{padding:3px;border-radius:8px}#glowPresets button canvas{height:40px;aspect-ratio:auto;object-fit:cover;border-radius:5px}#glowPresets button span{font-size:10px;padding:5px 1px 3px}#glowPresets button[aria-pressed="true"]::after{top:5px;right:5px;width:15px;height:15px;font-size:10px}
@media(min-width:1000px){main{grid-template-columns:minmax(340px,420px) minmax(0,1fr)}}
#controls .step-body{padding:0 18px 16px 10px;scrollbar-gutter:stable}#controls .step-body input[type=range]{display:block;width:calc(100% - 12px);margin:12px 6px 18px}
button:hover{transform:none}
.avatar-image-presets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:8px 0 14px}.avatar-image-presets button{position:relative;min-width:0;padding:3px;border:2px solid #eedff1;border-radius:8px;background:white;color:var(--text)}.avatar-image-presets canvas{width:100%;height:40px;object-fit:cover;border-radius:5px;touch-action:auto}.avatar-image-presets span{display:block;font-size:10px;font-weight:700;line-height:1.3;padding:5px 1px 3px}.avatar-image-presets button[aria-pressed=true]{border-color:var(--pink);background:var(--pink-light);color:var(--purple)}
.avatar-color-presets{display:flex;flex-wrap:wrap;gap:7px;margin:10px 0 16px}.avatar-color-presets button{display:flex;align-items:center;justify-content:center;width:40px;height:40px;min-height:40px;padding:7px;border-radius:50%;border:1px solid #dec4e7}.avatar-color-presets i{display:block;width:24px;height:24px;border-radius:50%;box-shadow:inset 0 0 0 1px #0002;font-style:normal}.avatar-color-presets button[aria-pressed=true]{border:2px solid var(--pink);background:var(--pink-light)}
.avatar-icon-presets{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 14px}.avatar-icon-presets button{display:flex;align-items:center;justify-content:center;width:40px;height:40px;min-height:40px;padding:7px}.avatar-icon-presets button[aria-pressed=true]{border-color:var(--pink);background:var(--pink-light)}
@media(min-width:781px){main .preview .stage{flex:0 1 auto;aspect-ratio:930/237;width:100%;min-height:50px;align-items:start}main .preview #view{align-self:start}main[data-step="0"] .preview{overflow:hidden}main[data-step="0"] .preview .stage{min-height:0}}
@media(max-width:780px){#controls .step-body{padding-left:8px;padding-right:14px}}
.avatar-extra-settings{flex:0 0 auto;border-top:1px solid #eedbeb;margin-top:12px;padding-top:12px}.avatar-extra-settings h3{font-size:16px;color:var(--purple);margin:0 0 8px}.avatar-extra-settings label{font-size:12px;margin:8px 0 6px}.avatar-extra-settings .hint{margin:6px 0}.avatar-extra-settings input[type=text]{width:100%;font:inherit;padding:8px;color:var(--text);border:1px solid #dec4e7;border-radius:8px;background:#fff8fd}.avatar-extra-settings button{font-size:12px;min-height:36px;margin-top:8px}

.avatar-area-method{border:1px solid #eedbeb;background:#fff8fd;border-radius:12px;padding:12px;margin:10px 0 16px}.avatar-area-hint{height:4.5em;line-height:1.5;overflow:auto;font-size:12px;margin:0 0 10px}.avatar-area-switch{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;border:1px solid #e4c5ed;border-radius:10px;background:white;padding:3px}.avatar-area-switch button{font-size:12px;padding:7px 4px;min-height:40px;border:0;border-radius:7px;background:transparent}.avatar-area-switch button[aria-pressed=true]{background:var(--purple);color:white}.avatar-paint-icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;min-height:40px;padding:8px}#avatarWholeControls{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}#avatarWholeControls>button{min-height:36px;font-size:12px;padding:6px 9px}#avatarWholeControls>button[aria-pressed=true]{background:var(--pink-light);border-color:var(--pink)}#avatarWholeControls>label{width:100%;margin:0}#avatarSelectionControls{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:8px 0}#avatarSelectionControls button{font-size:12px;min-height:36px}

#framePresets{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}#framePresets button{padding:3px;border-radius:8px}#framePresets canvas{height:40px;object-fit:cover}#framePresets span{font-size:10px;padding:5px 1px 3px}#frameColorSettings{border-top:1px solid #eedbeb;margin-top:16px;padding-top:8px}#frameColorSettings h3{font-size:16px;color:var(--purple)}#frameOriginalLabel{font-size:12px}

/* Keep crop controls from stretching the background color swatches. */
#studioCrop .avatar-color-presets button{width:40px;min-width:40px;max-width:40px;height:40px;flex:0 0 40px;padding:7px}
#coverFrameExtras section{border-top:1px solid #eedbeb;margin-top:16px;padding-top:8px}#coverFrameExtras h3{font-size:16px;color:var(--purple)}