/* Personalizza Facile — stile. Tutto sotto .pf per non toccare il sito che ospita l'app.
   Il colore d'accento si cambia con --pf-accento (opzione "colore" di monta()). */

@font-face { font-family: "PF UI"; src: url("fonts/ui.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }
@font-face { font-family: "PF Anton"; src: url("fonts/anton.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "PF Bebas Neue"; src: url("fonts/bebas.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "PF Montserrat"; src: url("fonts/montserrat.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "PF Oswald"; src: url("fonts/oswald.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "PF Bangers"; src: url("fonts/bangers.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "PF Black Ops One"; src: url("fonts/blackops.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "PF Righteous"; src: url("fonts/righteous.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "PF Rubik Mono One"; src: url("fonts/rubikmono.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "PF Playfair Display"; src: url("fonts/playfair.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "PF Lobster"; src: url("fonts/lobster.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "PF Pacifico"; src: url("fonts/pacifico.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "PF Great Vibes"; src: url("fonts/vibes.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "PF Caveat"; src: url("fonts/caveat.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "PF Permanent Marker"; src: url("fonts/marker.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "PF Press Start 2P"; src: url("fonts/pixel.woff2") format("woff2"); font-display: swap; }

.pf {
  --pf-carta: #f5f1e9;
  --pf-superficie: #fffdf8;
  --pf-tessuto: #ece6da;
  --pf-inchiostro: #1a1612;
  --pf-secondario: #5e564a;
  --pf-tenue: #8a8173;
  --pf-linea: #e2dace;
  --pf-linea-forte: #cfc5b5;
  --pf-accento: #e4472b;
  --pf-accento-testo: #ffffff;
  --pf-ok: #1f7a4d;
  --pf-attenzione: #a15c00;
  --pf-errore: #b42318;
  --pf-r: 14px;
  --pf-ombra: 0 1px 2px rgba(40, 30, 15, .06), 0 6px 18px -8px rgba(40, 30, 15, .18);
  --pf-ombra-alta: 0 2px 4px rgba(40, 30, 15, .08), 0 18px 40px -16px rgba(40, 30, 15, .35);
  --pf-ease: cubic-bezier(.16, 1, .3, 1);
  font-family: "PF UI", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.45;
  color: var(--pf-inchiostro);
  background: var(--pf-carta);
  position: relative;
  min-height: 100%;
  -webkit-tap-highlight-color: transparent;
  text-align: left;
}
.pf *, .pf *::before, .pf *::after { box-sizing: border-box; }
.pf ::selection { background: color-mix(in srgb, var(--pf-accento) 28%, transparent); color: var(--pf-inchiostro); }
:where(.pf) :where(button, input, textarea, select) { font: inherit; color: inherit; }
:where(.pf) :where(button) { cursor: pointer; background: none; border: 0; padding: 0; }
.pf button:disabled { cursor: not-allowed; opacity: .5; }
.pf :focus-visible { outline: 2.5px solid var(--pf-accento); outline-offset: 2px; border-radius: 8px; }
:where(.pf) :where(h1, h2, h3) { margin: 0; font-weight: 750; letter-spacing: -0.02em; text-wrap: balance; }
:where(.pf) :where(p) { margin: 0; }
.pf-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pf-i { width: 20px; height: 20px; flex: none; }
.pf-mini { font-size: .875rem; color: var(--pf-secondario); }
.pf-centro { text-align: center; justify-content: center; }
.pf-vuoto { padding: 32px 0; color: var(--pf-secondario); }
.pf-link { color: var(--pf-accento); text-decoration: underline; text-underline-offset: 3px; font-weight: 650; }
.pf * { scrollbar-width: thin; scrollbar-color: var(--pf-linea-forte) transparent; }

/* ── testata ── */
.pf-testa {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 16px;
  padding: 10px 16px; background: var(--pf-carta);
  border-bottom: 1px solid var(--pf-linea);
}
.pf-marchio { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pf-marchio b { display: block; font-size: 1rem; font-weight: 780; letter-spacing: -0.02em; white-space: nowrap; }
.pf-marchio small { display: block; font-size: .75rem; color: var(--pf-tenue); line-height: 1.1; }
.pf-logo { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--pf-inchiostro); color: var(--pf-carta); }
.pf-passi { display: flex; gap: 4px; margin-left: auto; overflow-x: auto; }
.pf-passo { display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 6px; border-radius: 999px; font-size: .875rem; font-weight: 600; color: var(--pf-secondario); white-space: nowrap; transition: background .2s var(--pf-ease); }
.pf-passo span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--pf-linea-forte); font-size: .75rem; font-variant-numeric: tabular-nums; }
.pf-passo span .pf-i { width: 14px; height: 14px; }
.pf-passo.attivo { color: var(--pf-inchiostro); background: var(--pf-superficie); box-shadow: var(--pf-ombra); }
.pf-passo.attivo span { background: var(--pf-inchiostro); border-color: var(--pf-inchiostro); color: var(--pf-carta); }
.pf-passo.fatto span { background: var(--pf-ok); border-color: var(--pf-ok); color: #fff; }
.pf-passo:not(:disabled):hover { color: var(--pf-inchiostro); }
@media (max-width: 640px) {
  .pf-testa { flex-wrap: wrap; gap: 8px; padding: 8px 12px; }
  .pf-passi { margin-left: 0; width: 100%; justify-content: space-between; }
  .pf-passo { font-size: .8125rem; padding-right: 8px; }
}
.pf-btn-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: var(--pf-inchiostro); transition: background .15s; }
.pf-btn-ico:hover, .pf-btn-ico.on { background: var(--pf-tessuto); }

.pf-corpo { padding: 16px; max-width: 1280px; margin: 0 auto; }

/* ── bottoni ── */
.pf-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 22px; width: 100%;
  border-radius: 14px; background: var(--pf-accento); color: var(--pf-accento-testo);
  font-weight: 700; font-size: 1.0625rem; letter-spacing: -0.01em; text-decoration: none;
  box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 8px 20px -10px var(--pf-accento);
  transition: transform .2s var(--pf-ease), box-shadow .2s var(--pf-ease), filter .2s;
}
.pf-cta:hover { filter: brightness(1.05); transform: translateY(-1px); }
.pf-cta:active { transform: translateY(0) scale(.99); }
.pf-cta-piccola { min-height: 44px; font-size: .9375rem; }
.pf-btn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px;
  border-radius: 10px; background: var(--pf-superficie); border: 1px solid var(--pf-linea);
  font-size: .875rem; font-weight: 600; transition: border-color .15s, background .15s;
}
.pf-btn .pf-i { width: 17px; height: 17px; }
.pf-btn:hover { border-color: var(--pf-linea-forte); }
.pf-btn.on { background: var(--pf-inchiostro); color: var(--pf-carta); border-color: var(--pf-inchiostro); }
.pf-btn-rosso { color: var(--pf-errore); }
.pf-riga-az { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }

/* chips e segmenti */
.pf-chips { display: flex; gap: 6px; overflow-x: auto; padding: 2px; scrollbar-width: none; }
.pf-chips::-webkit-scrollbar { display: none; }
.pf-chip { flex: none; display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--pf-linea); background: var(--pf-superficie); font-size: .875rem; font-weight: 600; white-space: nowrap; cursor: pointer; transition: all .15s; }
.pf-chip.on, .pf-chip:has(input:checked) { background: var(--pf-inchiostro); border-color: var(--pf-inchiostro); color: var(--pf-carta); }
.pf-chip input { position: absolute; opacity: 0; pointer-events: none; }
.pf-chip:has(input:focus-visible) { outline: 2.5px solid var(--pf-accento); outline-offset: 2px; }
.pf-seg { display: flex; padding: 4px; gap: 4px; border-radius: 12px; background: var(--pf-tessuto); }
.pf-seg button { flex: 1; min-height: 38px; padding: 4px 12px; border-radius: 9px; font-size: .875rem; font-weight: 650; color: var(--pf-secondario); line-height: 1.15; }
.pf-seg button small { display: block; font-size: .72rem; font-weight: 500; color: var(--pf-tenue); }
.pf-seg button[aria-selected="true"], .pf-seg button[aria-checked="true"] { background: var(--pf-superficie); color: var(--pf-inchiostro); box-shadow: var(--pf-ombra); }
.pf-seg-piccolo { margin: 12px 0; }
.pf-badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 4px; border-radius: 999px; background: var(--pf-accento); color: var(--pf-accento-testo); font-size: .72rem; font-variant-numeric: tabular-nums; }

/* colori */
.pf-colori, .pf-tavolozza { display: flex; flex-wrap: wrap; gap: 8px; }
.pf-col { position: relative; width: 34px; height: 34px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); transition: transform .15s var(--pf-ease); }
.pf-col.on { box-shadow: inset 0 0 0 1px rgba(0,0,0,.18), 0 0 0 2.5px var(--pf-carta), 0 0 0 4.5px var(--pf-inchiostro); }
.pf-col:hover { transform: scale(1.08); }
.pf-col-no { background: linear-gradient(135deg, #fff 45%, var(--pf-errore) 46%, var(--pf-errore) 54%, #fff 55%); }
.pf-col-libero { display: block; background: conic-gradient(#f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); cursor: pointer; overflow: hidden; }
.pf-col-libero input { opacity: 0; width: 100%; height: 100%; cursor: pointer; }

/* ── passo 1: capi ── */
.pf-capi { display: grid; gap: 16px; }
.pf-intro h1 { font-size: clamp(1.6rem, 4vw, 2.4rem); line-height: 1.05; letter-spacing: -0.035em; font-weight: 800; }
.pf-intro p { margin-top: 8px; max-width: 60ch; color: var(--pf-secondario); }
.pf-filtri { display: grid; gap: 8px; }
.pf-griglia { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 12px; }
.pf-card { width: 100%; height: 100%; display: flex; flex-direction: column; gap: 4px; padding: 8px 8px 12px; border-radius: var(--pf-r); background: var(--pf-superficie); border: 1px solid var(--pf-linea); text-align: left; transition: transform .25s var(--pf-ease), box-shadow .25s var(--pf-ease), border-color .2s; }
.pf-card:hover { transform: translateY(-2px); box-shadow: var(--pf-ombra); }
.pf-card.on { border-color: var(--pf-inchiostro); box-shadow: 0 0 0 1.5px var(--pf-inchiostro), var(--pf-ombra); }
.pf-card-img { display: block; aspect-ratio: 1; border-radius: 10px; background: var(--pf-tessuto); margin-bottom: 6px; overflow: hidden; }
.pf-card-nome { font-weight: 680; font-size: .9375rem; line-height: 1.2; letter-spacing: -0.01em; }
.pf-card-meta { font-size: .78rem; color: var(--pf-tenue); }
.pf-card-pallini { display: flex; align-items: center; gap: 3px; margin-top: 4px; }
.pf-card-pallini i { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.2); }
.pf-card-pallini em { font-style: normal; font-size: .72rem; color: var(--pf-tenue); margin-left: 2px; }
.pf-card-prezzo { margin-top: auto; padding-top: 6px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pf-card-prezzo small { font-weight: 500; color: var(--pf-tenue); font-size: .72rem; }
.pf-mini-capo { position: relative; display: block; width: 100%; height: 100%; }
.pf-mini-capo svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pf-mini-capo svg + svg { mix-blend-mode: multiply; }
.pf-scelta {
  position: sticky; bottom: 0; z-index: 20; margin: 16px -16px -16px;
  display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: center;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--pf-superficie);
  border-top: 1px solid var(--pf-linea); box-shadow: 0 -12px 30px -18px rgba(40,30,15,.35);
  animation: pf-sale .35s var(--pf-ease);
}
.pf-scelta-img { aspect-ratio: 1; border-radius: 12px; background: var(--pf-tessuto); }
.pf-scelta-info { display: grid; gap: 8px; min-width: 0; }
.pf-scelta-info .pf-colori { flex-wrap: nowrap; overflow-x: auto; padding: 6px 4px; }
.pf-scelta-info .pf-col { flex: none; width: 30px; height: 30px; }
@keyframes pf-sale { from { transform: translateY(24px); } }
@media (min-width: 980px) {
  [data-passo="capo"] .pf-corpo { display: grid; grid-template-columns: 1fr 340px; gap: 24px; align-items: start; }
  .pf-scelta { position: sticky; top: 76px; margin: 0; grid-template-columns: 1fr; border: 1px solid var(--pf-linea); border-radius: 18px; box-shadow: var(--pf-ombra); animation: none; }
  .pf-scelta-info .pf-colori { flex-wrap: wrap; overflow: visible; }
}

/* ── passo 2: editor ── */
.pf-editor { display: grid; gap: 12px; grid-template-areas: "palco" "sotto" "strumenti"; }
.pf-palco { grid-area: palco; }
.pf-sotto-palco { grid-area: sotto; }
.pf-strumenti { grid-area: strumenti; }
@media (max-width: 979px) {
  /* telefono: il capo resta sempre visibile mentre si scorre negli strumenti */
  [data-passo="grafica"] .pf-marchio { display: none; }
  [data-passo="grafica"] .pf-testa { padding-top: 6px; padding-bottom: 6px; }
  .pf-palco { position: sticky; top: 50px; z-index: 12; background: var(--pf-carta); margin: -16px -16px 0; padding: 8px 16px 8px; box-shadow: 0 10px 18px -16px rgba(40,30,15,.45); }
  .pf-tela-box { max-width: min(100%, 42vh); }
  /* lo scorrimento automatico (focus, tastiera) non deve finire sotto il palco fisso */
  .pf-strumenti, .pf-strumenti * { scroll-margin-top: calc(42vh + 130px); }
}
@media (max-width: 640px) { [data-passo="grafica"] .pf-testa { flex-wrap: nowrap; } }
.pf-palco { display: grid; gap: 10px; align-content: start; }
.pf-barra-palco { display: flex; align-items: center; gap: 8px; }
.pf-barra-palco .pf-seg { flex: 1; max-width: 300px; }
.pf-azioni-palco { display: flex; margin-left: auto; }
.pf-tela-box { position: relative; width: 100%; max-width: min(100%, 62vh, 640px); margin: 0 auto; aspect-ratio: 1; overflow: hidden; border-radius: 18px; background: radial-gradient(ellipse at 50% 40%, #fbf8f2, var(--pf-tessuto)); touch-action: none; }
.pf-tela { position: absolute; inset: 0; isolation: isolate; transition: transform .45s var(--pf-ease); user-select: none; -webkit-user-select: none; }
.pf-strato { position: absolute; inset: 0; pointer-events: none; }
.pf-strato svg { width: 100%; height: 100%; display: block; }
.pf-ombre-svg { z-index: 2; mix-blend-mode: multiply; }
.pf-zona { position: absolute; z-index: 1; }
.pf-zona::before { content: ""; position: absolute; inset: -1px; border: 1.5px dashed rgba(26, 22, 18, .32); border-radius: 3px; pointer-events: none; }
.pf-scuro .pf-zona::before { border-color: rgba(255, 255, 255, .45); }
.pf-scuro .pf-zona-vuota { color: rgba(255, 255, 255, .6); }
.pf-clip { position: absolute; inset: 0; overflow: hidden; }
.pf-zona-etichetta { position: absolute; left: 0; bottom: 100%; margin-bottom: 4px; padding: 2px 7px; border-radius: 6px; background: rgba(26,22,18,.72); color: #fff; font-size: 10px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; pointer-events: none; z-index: 4; }
.pf-zona-vuota { position: absolute; inset: 0; display: grid; place-items: center; padding: 8px; text-align: center; font-size: clamp(10px, 2.2vw, 14px); font-weight: 600; color: rgba(26,22,18,.45); pointer-events: none; }
.pf-liv { position: absolute; cursor: grab; touch-action: none; }
.pf-liv:active { cursor: grabbing; }
.pf-guida-v, .pf-guida-h { position: absolute; z-index: 3; background: var(--pf-accento); pointer-events: none; }
.pf-guida-v { left: 50%; top: -6%; bottom: -6%; width: 1px; }
.pf-guida-h { top: 50%; left: -6%; right: -6%; height: 1px; }
.pf-sel-box { position: absolute; z-index: 3; pointer-events: none; }
.pf-sel { position: absolute; outline: 1.5px solid var(--pf-accento); outline-offset: 1px; pointer-events: none; }
.pf-h { position: absolute; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #fff; color: var(--pf-inchiostro); box-shadow: 0 2px 8px rgba(0,0,0,.25); pointer-events: auto; touch-action: none; }
.pf-h .pf-i { width: 15px; height: 15px; }
.pf-h::after { content: ""; position: absolute; inset: -8px; }
.pf-h-del { top: -15px; right: -15px; color: var(--pf-errore); }
.pf-h-dup { top: -15px; left: -15px; }
.pf-h-scala { bottom: -15px; right: -15px; background: var(--pf-accento); color: var(--pf-accento-testo); cursor: nwse-resize; }
.pf-misura, .pf-avviso-dpi { position: absolute; left: 50%; top: 100%; transform: translate(-50%, 8px); padding: 2px 8px; border-radius: 6px; background: var(--pf-inchiostro); color: #fff; font-size: 11px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; pointer-events: none; }
.pf-avviso-dpi { top: auto; bottom: 100%; transform: translate(-50%, -8px); background: var(--pf-attenzione); }
.pf-avviso-dpi.rosso { background: var(--pf-errore); }
.pf-sotto-palco { display: grid; gap: 10px; justify-items: center; }
.pf-seg-zona { width: 100%; max-width: 420px; }
.pf-colori-palco { justify-content: safe center; flex-wrap: nowrap; overflow-x: auto; max-width: 100%; padding: 6px; }
.pf-colori-palco .pf-col { flex: none; width: 28px; height: 28px; }

.pf-strumenti { display: grid; gap: 0; align-content: start; background: var(--pf-superficie); border: 1px solid var(--pf-linea); border-radius: 18px; overflow: hidden; }
.pf-tabs { display: grid; grid-template-columns: repeat(5, 1fr); border-bottom: 1px solid var(--pf-linea); }
.pf-tab { position: relative; display: grid; justify-items: center; gap: 3px; padding: 10px 2px 9px; font-size: .72rem; font-weight: 650; color: var(--pf-tenue); line-height: 1.1; text-align: center; }
.pf-tab[aria-selected="true"] { color: var(--pf-inchiostro); }
.pf-tab[aria-selected="true"]::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: -1px; height: 2.5px; border-radius: 2px; background: var(--pf-accento); }
.pf-tab .pf-i { width: 22px; height: 22px; }
.pf-pulse { position: absolute; top: 8px; right: calc(50% - 18px); width: 9px; height: 9px; border-radius: 50%; background: var(--pf-accento); animation: pf-pulse 1.4s infinite; }
@keyframes pf-pulse { 50% { transform: scale(1.5); opacity: .5; } }
.pf-pannello { padding: 16px; display: grid; gap: 4px; align-content: start; }
.pf-pan-intro { margin-bottom: 10px; }
.pf-pan-intro h2 { font-size: 1.15rem; }
.pf-pan-intro p { margin-top: 4px; font-size: .875rem; color: var(--pf-secondario); max-width: 60ch; }
.pf-h3 { font-size: .8125rem; font-weight: 700; color: var(--pf-secondario); margin: 14px 0 8px; }
.pf-h2 { font-size: 1.35rem; }
:where(.pf) :where(textarea, input[type="text"], input[type="email"], input[type="tel"], input:not([type])), .pf-num {
  width: 100%; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--pf-linea-forte); background: #fff; resize: vertical; font-size: 1rem;
}
.pf textarea:focus, .pf input:focus { outline: none; border-color: var(--pf-inchiostro); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pf-accento) 20%, transparent); }
.pf textarea::placeholder, .pf input::placeholder { color: var(--pf-tenue); }
.pf-nuovo-testo { display: grid; gap: 8px; margin-bottom: 10px; }
.pf-font-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; margin-top: 10px; max-height: 196px; overflow-y: auto; padding: 2px; }
.pf-font { min-height: 44px; padding: 4px 8px; border-radius: 10px; border: 1px solid var(--pf-linea); background: #fff; font-size: 1rem; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-font.on { border-color: var(--pf-inchiostro); box-shadow: inset 0 0 0 1px var(--pf-inchiostro); }
.pf-cursore { display: grid; gap: 4px; margin-top: 12px; font-size: .8125rem; font-weight: 650; color: var(--pf-secondario); }
.pf-cursore > span { display: flex; justify-content: space-between; }
.pf-cursore output { color: var(--pf-inchiostro); font-variant-numeric: tabular-nums; }
.pf input[type="range"] { width: 100%; accent-color: var(--pf-accento); height: 28px; }
.pf-drop { display: grid; justify-items: center; gap: 4px; padding: 22px 16px; border: 1.5px dashed var(--pf-linea-forte); border-radius: 14px; background: var(--pf-carta); text-align: center; cursor: pointer; transition: border-color .15s, background .15s; }
.pf-drop:hover { border-color: var(--pf-inchiostro); background: #fff; }
.pf-drop .pf-i { width: 28px; height: 28px; color: var(--pf-accento); }
.pf-drop span { font-size: .8125rem; color: var(--pf-secondario); }
.pf-qualita { padding: 10px 12px; border-radius: 10px; font-size: .875rem; }
.pf-q-buona { background: #e7f4ec; color: var(--pf-ok); }
.pf-q-media { background: #fbf0dc; color: var(--pf-attenzione); }
.pf-q-bassa { background: #fde7e4; color: var(--pf-errore); }
.pf-sep { height: 1px; background: var(--pf-linea); margin: 14px 0; }
.pf-oggetti { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 6px; }
.pf-ogg { aspect-ratio: 1; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--pf-linea); background: #fff; transition: transform .15s var(--pf-ease), border-color .15s; }
.pf-ogg:hover { transform: translateY(-1px); border-color: var(--pf-inchiostro); }
.pf-ogg svg { width: 60%; height: 60%; fill: var(--pf-inchiostro); }
.pf-livelli { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.pf-livelli li { display: flex; align-items: center; gap: 4px; border-radius: 10px; border: 1px solid var(--pf-linea); background: #fff; }
.pf-livelli li.on { border-color: var(--pf-inchiostro); }
.pf-liv-nome { flex: 1; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 10px; text-align: left; font-size: .9rem; font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pf-liv-nome .pf-i { width: 17px; height: 17px; color: var(--pf-tenue); }
.pf-livelli [aria-pressed="true"] { opacity: .4; }
.pf-avanti { position: sticky; bottom: 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(transparent, var(--pf-superficie) 30%); }

/* AI */
.pf-ai-form { display: grid; gap: 10px; }
.pf-esempi { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.pf-esempi::-webkit-scrollbar { display: none; }
.pf-chip-esempio { font-weight: 500; color: var(--pf-secondario); background: var(--pf-carta); }
.pf-stili { flex-wrap: wrap; overflow: visible; }
.pf-ai-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pf-ai-job { padding: 12px; border-radius: 14px; border: 1px solid var(--pf-linea); background: var(--pf-carta); display: grid; gap: 8px; }
.pf-ai-testo { font-weight: 650; font-size: .9rem; }
.pf-ai-testo small { font-weight: 500; color: var(--pf-tenue); }
.pf-ai-img { border-radius: 10px; overflow: hidden; background: repeating-conic-gradient(#ece6da 0 25%, #fffdf8 0 50%) 0 0 / 18px 18px; }
.pf-ai-img img { display: block; width: 100%; height: auto; }
.pf-ai-dove { font-weight: 700; font-size: .875rem; }
.pf-ai-posti { display: flex; flex-wrap: wrap; gap: 6px; }
.pf-progresso { height: 8px; border-radius: 99px; background: var(--pf-tessuto); overflow: hidden; }
.pf-progresso i { display: block; height: 100%; border-radius: 99px; background: var(--pf-accento); transition: width .8s var(--pf-ease); background-image: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); background-size: 60px 100%; animation: pf-scorre 1.2s linear infinite; }
@keyframes pf-scorre { to { background-position: 60px 0; } }
.pf-ai-pillola { position: fixed; z-index: 60; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; background: var(--pf-inchiostro); color: var(--pf-carta); font-size: .875rem; font-weight: 650; box-shadow: var(--pf-ombra-alta); }
.pf-ai-pillola button { display: flex; align-items: center; gap: 8px; color: inherit; font-weight: 700; }
.pf-ai-pillola[hidden] { display: none; }
.pf-spinner { width: 16px; height: 16px; border-radius: 50%; border: 2.5px solid currentColor; border-right-color: transparent; animation: pf-gira .8s linear infinite; flex: none; }
@keyframes pf-gira { to { transform: rotate(1turn); } }
.pf-errore { color: var(--pf-errore); font-size: .875rem; font-weight: 600; }
.pf-avviso { padding: 10px 12px; border-radius: 10px; background: #fbf0dc; color: var(--pf-attenzione); font-size: .875rem; }

@media (min-width: 980px) {
  .pf-editor { grid-template-columns: minmax(0, 1fr) 400px; grid-template-areas: "palco strumenti" "sotto strumenti"; gap: 12px 24px; align-items: start; }
  .pf-tela-box { max-width: min(100%, 74vh, 720px); }
  .pf-strumenti { max-height: calc(100vh - 92px); position: sticky; top: 76px; display: flex; flex-direction: column; }
  .pf-pannello { overflow-y: auto; flex: 1; }
}

/* ── passo 3: anteprima ── */
.pf-anteprima { display: grid; gap: 20px; }
.pf-mockup-lati { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pf-mockup figure { margin: 0; }
.pf-mk-img { aspect-ratio: 1; border-radius: 16px; overflow: hidden; background: var(--pf-tessuto); }
.pf-mk-img canvas { width: 100%; height: 100%; display: block; animation: pf-appare .5s var(--pf-ease); }
@keyframes pf-appare { from { opacity: 0; transform: scale(.98); } }
.pf-carica { background: linear-gradient(100deg, var(--pf-tessuto) 30%, #f7f3ec 50%, var(--pf-tessuto) 70%) 0 0 / 200% 100%; animation: pf-luccica 1.2s infinite; }
@keyframes pf-luccica { to { background-position: -200% 0; } }
.pf-mockup figcaption { margin-top: 6px; text-align: center; font-size: .8125rem; font-weight: 600; color: var(--pf-secondario); }
.pf-vantaggi { list-style: none; margin: 4px 0; padding: 0; display: grid; gap: 6px; font-size: .875rem; }
.pf-vantaggi li { display: flex; gap: 8px; align-items: flex-start; }
.pf-vantaggi .pf-i { width: 18px; height: 18px; color: var(--pf-ok); stroke-width: 2.25; margin-top: 1px; }
.pf-ordine { display: grid; gap: 10px; align-content: start; padding: 18px; border-radius: 18px; background: var(--pf-superficie); border: 1px solid var(--pf-linea); }
.pf-taglie { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 6px; }
.pf-taglia { display: grid; gap: 2px; justify-items: center; padding: 6px; border-radius: 12px; border: 1px solid var(--pf-linea); background: #fff; font-weight: 700; font-size: .875rem; }
.pf-taglia input { width: 100%; text-align: center; padding: 6px 2px; border-radius: 8px; border: 1px solid var(--pf-linea-forte); font-variant-numeric: tabular-nums; font-size: 1rem; }
.pf-taglia small { font-size: .68rem; font-weight: 600; color: var(--pf-attenzione); }
.pf-taglia.esaurita { opacity: .45; }
.pf-taglia:has(input:not(:placeholder-shown)) { border-color: var(--pf-inchiostro); }
.pf-totali dl { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; margin: 6px 0 0; font-size: .9375rem; font-variant-numeric: tabular-nums; }
.pf-totali dd { margin: 0; text-align: right; font-weight: 650; }
.pf-totali .pf-tot { padding-top: 8px; border-top: 1px solid var(--pf-linea); font-size: 1.15rem; font-weight: 800; }
.pf-totali dd.pf-tot small { font-size: .72rem; font-weight: 500; color: var(--pf-tenue); }
.pf-file, .pf-altre { border-radius: 12px; border: 1px solid var(--pf-linea); padding: 10px 12px; background: var(--pf-carta); }
.pf-file summary, .pf-altre summary { cursor: pointer; font-weight: 650; font-size: .9rem; }
.pf-file[open] summary, .pf-altre[open] summary { margin-bottom: 8px; }
.pf-check { display: flex; gap: 10px; align-items: flex-start; font-size: .8125rem; color: var(--pf-secondario); cursor: pointer; }
.pf-check input { width: 20px; height: 20px; accent-color: var(--pf-accento); flex: none; margin-top: 1px; }
.pf-azioni-ordine { display: grid; gap: 8px; }
.pf-righe { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pf-righe .pf-btn { width: 100%; justify-content: flex-start; }
.pf-form-ordine { display: grid; gap: 8px; }
.pf-form-ordine label { display: grid; gap: 4px; font-size: .8125rem; font-weight: 650; color: var(--pf-secondario); }
@media (min-width: 980px) {
  .pf-anteprima { grid-template-columns: minmax(0, 1.25fr) 420px; gap: 28px; align-items: start; }
  .pf-ordine { position: sticky; top: 76px; }
}

/* ── fatto ── */
.pf-fatto { max-width: 560px; margin: 40px auto; text-align: center; display: grid; gap: 14px; justify-items: center; }
.pf-fatto h1 { font-size: 2rem; letter-spacing: -0.035em; }
.pf-fatto p { color: var(--pf-secondario); max-width: 48ch; }
.pf-fatto .pf-cta { width: auto; }
.pf-fatto-ico { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--pf-ok); color: #fff; animation: pf-appare .5s var(--pf-ease); }
.pf-fatto-ico .pf-i { width: 36px; height: 36px; stroke-width: 2.5; }

/* ── toast ── */
.pf-toast { position: fixed; z-index: 70; left: 50%; top: 16px; visibility: hidden; transform: translate(-50%, calc(-100% - 32px)); max-width: min(92vw, 520px); padding: 12px 16px; border-radius: 14px; background: var(--pf-inchiostro); color: var(--pf-carta); font-size: .9rem; font-weight: 600; box-shadow: var(--pf-ombra-alta); transition: transform .4s var(--pf-ease); pointer-events: none; }
.pf-toast.on { visibility: visible; transform: translate(-50%, 0); }
.pf-toast.errore { background: var(--pf-errore); color: #fff; }
.pf-toast.ai { background: var(--pf-accento); color: var(--pf-accento-testo); }

@media (prefers-reduced-motion: reduce) {
  .pf *, .pf *::before, .pf *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}