/* Layout of the PFP generator (shared/pfp.js). Each variant themes it with the --pfp-* variables. */
.pfp { display: grid; gap: 22px; }
.pfp-stage { position: relative; aspect-ratio: 1; width: 100%; max-width: 520px; margin: 0 auto; overflow: hidden;
  background: var(--pfp-stage, #1a1027); border: var(--pfp-frame, 3px solid #000); border-radius: var(--pfp-radius, 18px);
  box-shadow: var(--pfp-shadow, none); }
.pfp-canvas { display: block; width: 100%; height: 100%; }
.pfp:not(.is-ready) .pfp-canvas { opacity: 0; }
.pfp-canvas { transition: opacity .3s; }
.pfp-controls { display: grid; gap: 20px; align-content: start; min-width: 0; }
.pfp-group { display: grid; gap: 10px; position: relative; min-width: 0; }
.pfp-label { font: var(--pfp-label-font, 600 13px/1 system-ui, sans-serif); letter-spacing: var(--pfp-label-spacing, .16em);
  text-transform: uppercase; color: var(--pfp-dim, #b9a7c9); }
.pfp-input { width: 100%; min-height: 54px; padding: 12px 70px 12px 16px; font: var(--pfp-input-font, 400 22px/1.1 Anton, Impact, sans-serif);
  letter-spacing: .04em; text-transform: uppercase; color: var(--pfp-ink, #fff); background: var(--pfp-field, rgba(255,255,255,.06));
  border: var(--pfp-line, 2px solid rgba(255,255,255,.22)); border-radius: var(--pfp-radius-s, 12px); outline: none; }
.pfp-input::placeholder { color: var(--pfp-dim, #b9a7c9); opacity: .6; }
.pfp-input:focus-visible { border-color: var(--pfp-accent, #ff8a1f); box-shadow: 0 0 0 3px var(--pfp-focus, rgba(255,138,31,.3)); }
.pfp-count { position: absolute; right: 14px; bottom: 18px; font: 600 12px/1 system-ui, sans-serif; color: var(--pfp-dim, #b9a7c9); pointer-events: none; }
.pfp-swatches, .pfp-bgs, .pfp-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.pfp-swatch { width: 44px; height: 44px; padding: 0; border-radius: 50%; background: var(--c); cursor: pointer;
  border: var(--pfp-swatch-border, 3px solid rgba(0,0,0,.55)); box-shadow: 0 0 0 2px var(--pfp-swatch-ring, rgba(255,255,255,.18)); transition: transform .15s; }
.pfp-swatch:hover { transform: scale(1.08); }
.pfp-swatch[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--pfp-page, #0b0613), 0 0 0 6px var(--pfp-accent, #ff8a1f); }
.pfp-bg { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 9px; cursor: pointer;
  font: var(--pfp-chip-font, 600 14px/1 system-ui, sans-serif); color: var(--pfp-ink, #fff); background: var(--pfp-field, rgba(255,255,255,.06));
  border: var(--pfp-line, 2px solid rgba(255,255,255,.22)); border-radius: 999px; }
.pfp-bg i { width: 26px; height: 26px; border-radius: 50%; border: 2px solid rgba(0,0,0,.45); flex: none; }
.pfp-bg[aria-pressed="true"] { border-color: var(--pfp-accent, #ff8a1f); box-shadow: 0 0 0 2px var(--pfp-accent, #ff8a1f); }
.pfp-swatch:focus-visible, .pfp-bg:focus-visible, .pfp-btn:focus-visible { outline: 3px solid var(--pfp-accent, #ff8a1f); outline-offset: 3px; }
.pfp-btn { min-height: 54px; padding: 0 26px; cursor: pointer; font: var(--pfp-btn-font, 400 20px/1 Anton, Impact, sans-serif);
  letter-spacing: .06em; text-transform: uppercase; color: var(--pfp-on-accent, #14081f); background: var(--pfp-btn-bg, var(--pfp-accent, #ff8a1f));
  border: var(--pfp-btn-border, 0); border-radius: var(--pfp-radius-s, 12px); box-shadow: var(--pfp-btn-shadow, none); transition: transform .15s, filter .15s; }
.pfp-btn:hover { transform: translateY(-2px); filter: brightness(1.08); }
.pfp-btn:disabled { opacity: .5; cursor: default; transform: none; }
.pfp-share { background: transparent; color: var(--pfp-ink, #fff); border: var(--pfp-line, 2px solid rgba(255,255,255,.22)); box-shadow: none; }
.pfp-hint { margin: 0; font-size: 14px; line-height: 1.5; color: var(--pfp-dim, #b9a7c9); }
@media (min-width: 860px) {
  .pfp { grid-template-columns: minmax(0, 460px) minmax(0, 1fr); gap: 40px; align-items: start; }
  .pfp-stage { margin: 0; }
}
@media (prefers-reduced-motion: reduce) { .pfp-swatch, .pfp-btn, .pfp-canvas { transition: none; } }