/* profile-picture-maker */
.pf-editor { display: grid; gap: 22px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .pf-editor { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; } }
.pf-stage { display: grid; place-items: center; padding: 18px; border-radius: 14px; background: repeating-conic-gradient(#E3E7EE 0 25%, #fff 0 50%) 0 0 / 18px 18px; }
.pf-stage canvas { width: min(100%, 360px); height: auto; aspect-ratio: 1; cursor: grab; touch-action: none; }
.pf-stage canvas:active { cursor: grabbing; }
.pf-panel { display: flex; flex-direction: column; gap: 12px; }
.pf-panel .btn { align-self: flex-start; }
.pf-swatches { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.pf-swatch { position: relative; width: 38px; height: 38px; padding: 0; border: 2px solid transparent; border-radius: 50%; background: var(--mist); font: 600 0.62rem var(--text); color: var(--ink); cursor: pointer; overflow: hidden; box-shadow: inset 0 0 0 1px rgb(15 23 42 / 0.1); }
.pf-swatch[aria-pressed="true"] { border-color: var(--ink); box-shadow: 0 0 0 2px #fff inset; }
.pf-swatch-color { background: conic-gradient(#F43F5E, #F59E0B, #10B981, #3B82F6, #8B5CF6, #F43F5E); }
.pf-swatch-color input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.pf-label { display: block; margin-bottom: 6px; font-weight: 600; font-size: 0.92rem; color: var(--ink); }