/* =========================================================================
   SuperFumetto — /crea wizard styles
   Loaded only on the builder page. All .sf-crea, .sf-cstep, .sf-cprog,
   .sf-char, .sf-style, .sf-plot, .sf-summary, .sf-preview, .sf-genfake,
   .sf-gendone rules.
   ========================================================================= */

/* =========================================================================
   11. /crea Wizard
   ========================================================================= */

/* Global: ensure [hidden] always hides, even when a utility class like .sf-btn
   sets display: inline-flex (which otherwise wins by specificity). */
[hidden] { display: none !important; }

.sf-crea-main { padding-top: var(--s-7); padding-bottom: var(--s-9); }

.sf-crea {
	position: relative;
	padding: var(--s-7) 0 var(--s-9);
}

.sf-crea__head {
	max-width: 780px;
	margin: 0 auto var(--s-8);
	text-align: center;
}
.sf-crea__title { margin: var(--s-3) 0 var(--s-4); }
.sf-crea__lead {
	color: var(--c-ink-soft);
	font-size: var(--fs-lead);
	line-height: 1.5;
}
.sf-crea__head .sf-eyebrow { justify-content: center; }
.sf-crea__head .sf-eyebrow::before { display: none; }
.sf-crea__head .sf-eyebrow::after {
	content: "";
	width: 26px;
	height: 1px;
	background: currentColor;
	opacity: 0.7;
	margin-left: var(--s-3);
}

/* -------- Progress bar -------- */
.sf-cprog {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--s-3);
	list-style: none;
	padding: 0;
	margin: 0 0 var(--s-8);
	counter-reset: cprog;
	max-width: 980px;
	margin-left: auto;
	margin-right: auto;
}

.sf-cprog__item { position: relative; }

.sf-cprog__btn {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	width: 100%;
	padding: var(--s-4) var(--s-4);
	background: var(--c-card);
	border: var(--stroke) solid var(--c-line-soft);
	border-radius: var(--r-lg);
	text-align: left;
	transition: border-color var(--t), background var(--t), transform var(--t);
	cursor: pointer;
}
.sf-cprog__btn:hover { border-color: var(--c-line); transform: translateY(-1px); }
.sf-cprog__btn:focus-visible {
	outline: 2px solid var(--c-accent);
	outline-offset: 3px;
}

.sf-cprog__num {
	font-family: var(--ff-mono);
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	display: inline-grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 999px;
	background: var(--c-paper-deep);
	color: var(--c-ink);
	flex-shrink: 0;
	transition: background var(--t), color var(--t);
}

.sf-cprog__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	line-height: 1.2;
}
.sf-cprog__label {
	font-family: var(--ff-ui);
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--c-ink);
}
.sf-cprog__hint {
	font-family: var(--ff-ui);
	font-size: 0.78rem;
	color: var(--c-ink-mute);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.sf-cprog__check {
	margin-left: auto;
	display: none;
	width: 22px;
	height: 22px;
	color: var(--c-mint);
	flex-shrink: 0;
}
.sf-cprog__check svg { width: 100%; height: 100%; }

/* Item states */
.sf-cprog__item[data-state="done"] .sf-cprog__btn {
	background: color-mix(in srgb, var(--c-mint) 10%, var(--c-card));
	border-color: color-mix(in srgb, var(--c-mint) 40%, var(--c-line-soft));
}
.sf-cprog__item[data-state="done"] .sf-cprog__num {
	background: var(--c-mint);
	color: #fff;
}
.sf-cprog__item[data-state="done"] .sf-cprog__check { display: block; }

.sf-cprog__item[data-state="current"] .sf-cprog__btn {
	border-color: var(--c-ink);
	background: var(--c-card);
	box-shadow: 4px 4px 0 var(--c-ink);
	transform: translateY(-1px);
}
.sf-cprog__item[data-state="current"] .sf-cprog__num {
	background: var(--c-accent);
	color: var(--c-accent-contrast);
}

.sf-cprog__item[data-state="upcoming"] .sf-cprog__btn { opacity: 0.85; }

/* Connector line between steps */
.sf-cprog__item + .sf-cprog__item::before {
	content: "";
	position: absolute;
	top: 50%;
	left: calc(var(--s-3) * -1);
	width: var(--s-3);
	height: 2px;
	background: repeating-linear-gradient(
		to right,
		var(--c-line-soft) 0 4px,
		transparent 4px 8px
	);
	transform: translateY(-50%);
	pointer-events: none;
}

/* -------- Step shell -------- */
.sf-crea__form {
	max-width: 980px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: var(--s-6);
}

.sf-cstep { display: none; }
.sf-cstep[data-active="true"] {
	display: block;
	animation: sf-cstep-in 360ms cubic-bezier(.2,.6,.2,1);
}
@keyframes sf-cstep-in {
	0%   { opacity: 0; transform: translateY(10px); }
	100% { opacity: 1; transform: translateY(0); }
}

.sf-cstep__head {
	margin-bottom: var(--s-6);
	text-align: center;
}
.sf-cstep__kicker {
	font-family: var(--ff-mono);
	font-size: 0.74rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--c-ink-mute);
	margin: 0 0 var(--s-3);
}
.sf-cstep__title { margin: 0 auto var(--s-3); max-width: 26ch; }
.sf-cstep__lead {
	color: var(--c-ink-soft);
	max-width: 56ch;
	margin: 0 auto;
	font-size: var(--fs-body);
}
.sf-cstep__code {
	font-family: var(--ff-mono);
	font-size: 0.82em;
	background: var(--c-paper-deep);
	padding: 2px 6px;
	border-radius: 4px;
	white-space: nowrap;
}

.sf-cstep__error {
	margin: var(--s-4) auto 0;
	max-width: 50ch;
	padding: var(--s-3) var(--s-4);
	background: color-mix(in srgb, var(--c-vermilion) 12%, var(--c-card));
	border: var(--stroke) solid var(--c-vermilion);
	border-radius: var(--r-md);
	color: var(--c-vermilion);
	font-size: 0.92rem;
	font-weight: 500;
}
.sf-cstep__error.is-flash { animation: sf-shake 360ms ease-out; }
@keyframes sf-shake {
	0%, 100% { transform: translateX(0); }
	20% { transform: translateX(-6px); }
	40% { transform: translateX(6px); }
	60% { transform: translateX(-3px); }
	80% { transform: translateX(3px); }
}

/* Inline invalid state — applied to specific fields that failed validation.
   Cleared the moment the user starts fixing the input. */
.sf-field__input.is-invalid,
.sf-field__select.is-invalid,
.sf-field__textarea.is-invalid {
	border-color: var(--c-vermilion);
	background: color-mix(in srgb, var(--c-vermilion) 6%, var(--c-card));
}
.sf-field__input.is-invalid:focus-visible,
.sf-field__select.is-invalid:focus-visible,
.sf-field__textarea.is-invalid:focus-visible {
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-vermilion) 28%, transparent);
}
.sf-field.is-invalid .sf-field__label {
	color: var(--c-vermilion);
}
.sf-field__hint {
	display: none;
	margin-top: 6px;
	font-family: var(--ff-ui);
	font-size: 0.82rem;
	color: var(--c-vermilion);
	font-weight: 500;
}
.sf-field.is-invalid .sf-field__hint { display: block; }

.sf-char.is-invalid {
	border-color: var(--c-vermilion);
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-vermilion) 18%, transparent);
	animation: sf-shake 360ms ease-out;
}

.sf-styles.is-invalid,
[data-styles].is-invalid {
	outline: 2px dashed var(--c-vermilion);
	outline-offset: 6px;
	border-radius: var(--r-lg);
	animation: sf-shake 360ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
	.sf-char.is-invalid,
	.sf-styles.is-invalid,
	[data-styles].is-invalid {
		animation: none;
	}
}

.sf-cstep__empty {
	padding: var(--s-6);
	text-align: center;
	color: var(--c-ink-mute);
	background: var(--c-card-soft);
	border: var(--stroke) dashed var(--c-line-soft);
	border-radius: var(--r-lg);
	font-size: 0.95rem;
}

.sf-cstep__note {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	margin: var(--s-5) auto 0;
	max-width: 60ch;
	padding: var(--s-3) var(--s-4);
	color: var(--c-ink-mute);
	font-size: 0.88rem;
	background: var(--c-card-soft);
	border-radius: var(--r-md);
}
.sf-cstep__note svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--c-ink-mute); }

/* -------- Shared fields -------- */
.sf-field {
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
}
.sf-field--block { display: block; }
.sf-field__label {
	font-family: var(--ff-mono);
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--c-ink-mute);
	font-weight: 500;
}
.sf-field__input {
	font-family: var(--ff-ui);
	font-size: 1rem;
	padding: var(--s-3) var(--s-4);
	background: var(--c-card);
	border: var(--stroke) solid var(--c-line-soft);
	border-radius: var(--r-md);
	color: var(--c-ink);
	transition: border-color var(--t), box-shadow var(--t);
	width: 100%;
}
.sf-field__input:hover { border-color: var(--c-line); }
.sf-field__input:focus-visible {
	outline: none;
	border-color: var(--c-ink);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-accent) 28%, transparent);
}
.sf-field__select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23141211' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='1 1 6 6 11 1'/></svg>");
	background-repeat: no-repeat;
	background-position: right var(--s-4) center;
	background-size: 10px 6px;
	padding-right: var(--s-7);
	cursor: pointer;
}
.sf-field__textarea {
	resize: vertical;
	min-height: 160px;
	line-height: 1.55;
	font-size: 1rem;
	width: 100%;
}

/* -------- Step 1: Characters -------- */
.sf-chars {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: var(--s-4);
	margin-bottom: var(--s-4);
}

.sf-char {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--s-4);
	padding: var(--s-5);
	background: var(--c-card);
	border: var(--stroke) solid var(--c-line-soft);
	border-radius: var(--r-lg);
	transition: border-color var(--t), box-shadow var(--t);
}
.sf-char:hover { border-color: var(--c-line); }
.sf-char:focus-within {
	border-color: var(--c-ink);
	box-shadow: 3px 3px 0 var(--c-ink);
}

.sf-char__remove {
	position: absolute;
	top: var(--s-3);
	right: var(--s-3);
	width: 30px;
	height: 30px;
	display: grid;
	place-items: center;
	background: var(--c-paper);
	border: var(--stroke) solid var(--c-line-soft);
	border-radius: 999px;
	color: var(--c-ink-mute);
	transition: color var(--t), background var(--t), border-color var(--t);
	z-index: 2;
}
.sf-char__remove:hover {
	color: var(--c-vermilion);
	border-color: var(--c-vermilion);
	background: color-mix(in srgb, var(--c-vermilion) 12%, var(--c-paper));
}
.sf-char__remove svg { width: 14px; height: 14px; }

.sf-char__upload {
	position: relative;
	display: block;
	cursor: pointer;
	align-self: center;
}
.sf-char__photo {
	position: relative; /* for the uploading overlay + spinner */
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	width: 128px;
	height: 128px;
	border-radius: 999px;
	background: var(--c-paper-deep);
	border: var(--stroke-bold) dashed var(--c-line);
	color: var(--c-ink-mute);
	overflow: hidden;
	transition: background var(--t), border-color var(--t);
	line-height: 1;
}
.sf-char__upload:hover .sf-char__photo {
	background: var(--c-paper-soft);
	border-color: var(--c-ink);
}
.sf-char__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
}
.sf-char__photo-icon { width: 26px; height: 26px; display: block; }
.sf-char__photo-hint {
	font-size: 0.7rem;
	font-family: var(--ff-mono);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1;
	margin: 0;
}

.sf-char__photo-edit {
	position: absolute;
	bottom: -2px;
	right: 50%;
	transform: translateX(70px);
	width: 36px;
	height: 36px;
	display: none;
	place-items: center;
	background: var(--c-accent);
	color: var(--c-accent-contrast);
	border-radius: 999px;
	box-shadow: 0 2px 0 var(--c-ink);
	pointer-events: none;
}
.sf-char__photo-edit svg { width: 16px; height: 16px; }
.sf-char[data-has-photo="true"] .sf-char__photo-edit { display: grid; }
.sf-char[data-has-photo="true"] .sf-char__photo { border-style: solid; }

.sf-char__fields {
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
}

.sf-char-add {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	width: 100%;
	padding: var(--s-4) var(--s-5);
	background: transparent;
	border: var(--stroke-bold) dashed var(--c-line);
	border-radius: var(--r-lg);
	color: var(--c-ink);
	font-weight: 600;
	transition: background var(--t), border-color var(--t), color var(--t);
	cursor: pointer;
}
.sf-char-add:hover {
	background: var(--c-card-soft);
	border-color: var(--c-ink);
}
.sf-char-add:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}
.sf-char-add__icon {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	background: var(--c-accent);
	color: var(--c-accent-contrast);
	border-radius: 999px;
	flex-shrink: 0;
}
.sf-char-add__icon svg { width: 18px; height: 18px; }
.sf-char-add__label { flex: 1; text-align: left; }
.sf-char-add__count {
	font-family: var(--ff-mono);
	font-size: 0.82rem;
	color: var(--c-ink-mute);
}

/* -------- Step 2: Styles -------- */
.sf-styles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: var(--s-4);
}

/* Hide the grid that doesn't match current category */
[data-category="kids"]   [data-styles-for="adults"],
[data-category="adults"] [data-styles-for="kids"],
[data-category="kids"]   [data-plots-for="adults"],
[data-category="adults"] [data-plots-for="kids"] {
	display: none;
}

.sf-style {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
}

.sf-style__card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
	width: 100%;
	padding: var(--s-4);
	background: var(--c-card);
	border: var(--stroke) solid var(--c-line-soft);
	border-radius: var(--r-lg);
	cursor: pointer;
	transition: transform var(--t), border-color var(--t), box-shadow var(--t);
	overflow: hidden;
	text-align: left;
}
.sf-style__card:hover {
	transform: translateY(-2px);
	border-color: var(--c-line);
}
.sf-style__card:focus-visible {
	outline: 2px solid var(--c-accent);
	outline-offset: 3px;
}
.sf-style[data-selected="true"] .sf-style__card {
	border-color: var(--c-ink);
	box-shadow: 5px 5px 0 var(--c-ink);
}

.sf-style__badge {
	position: absolute;
	top: var(--s-3);
	left: var(--s-3);
	font-family: var(--ff-mono);
	font-size: 0.66rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 700;
	padding: 4px 8px;
	border-radius: 999px;
	z-index: 2;
}
.sf-style__badge--new {
	background: var(--c-sunshine);
	color: var(--c-ink);
}
.sf-style__badge--popular {
	background: var(--c-ink);
	color: var(--c-paper);
}

.sf-style__thumb {
	display: block;
	aspect-ratio: 4/3;
	border-radius: var(--r-md);
	overflow: hidden;
	background: var(--c-paper-deep);
	position: relative;
}
.sf-style__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.sf-style__thumb-ph {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	color: var(--c-ink-mute);
	background: linear-gradient(135deg, var(--c-paper-deep), var(--c-paper-soft));
}
.sf-style__thumb-ph svg { width: 40%; height: 40%; opacity: 0.6; }

.sf-style__meta { display: flex; flex-direction: column; gap: 4px; }
.sf-style__title {
	font-family: var(--ff-display);
	font-weight: 600;
	font-size: 1.15rem;
	letter-spacing: -0.01em;
	color: var(--c-ink);
}
.sf-style__desc {
	font-size: 0.88rem;
	line-height: 1.45;
	color: var(--c-ink-soft);
}

.sf-style__check {
	position: absolute;
	top: var(--s-3);
	right: var(--s-3);
	width: 32px;
	height: 32px;
	display: grid;
	place-items: center;
	background: var(--c-accent);
	color: var(--c-accent-contrast);
	border-radius: 999px;
	opacity: 0;
	transform: scale(0.6);
	transition: opacity var(--t), transform var(--t);
	box-shadow: 0 2px 0 var(--c-ink);
}
.sf-style[data-selected="true"] .sf-style__check {
	opacity: 1;
	transform: scale(1);
}
.sf-style__check svg { width: 16px; height: 16px; }

.sf-style__gallery {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--s-2);
	padding: var(--s-3);
	background: var(--c-paper-deep);
	border: var(--stroke) solid var(--c-line-soft);
	border-radius: var(--r-md);
}
.sf-style__gallery img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: var(--r-sm);
	display: block;
}

/* -------- Step 3: Plots -------- */
.sf-plots {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: var(--s-4);
	margin-bottom: var(--s-6);
}

.sf-plot {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
	padding: var(--s-5);
	background: var(--c-card);
	border: var(--stroke) solid var(--c-line-soft);
	border-radius: var(--r-lg);
	cursor: pointer;
	text-align: left;
	transition: transform var(--t), border-color var(--t), box-shadow var(--t);
	min-height: 160px;
}
.sf-plot:hover {
	transform: translateY(-2px);
	border-color: var(--c-line);
}
.sf-plot:focus-visible {
	outline: 2px solid var(--c-accent);
	outline-offset: 3px;
}
.sf-plot[data-selected="true"] {
	border-color: var(--c-ink);
	box-shadow: 5px 5px 0 var(--c-ink);
}

.sf-plot__emoji {
	font-size: 2rem;
	line-height: 1;
	margin-bottom: var(--s-2);
}
.sf-plot__title {
	font-family: var(--ff-display);
	font-weight: 600;
	font-size: 1.15rem;
	letter-spacing: -0.01em;
	color: var(--c-ink);
}
.sf-plot__tagline {
	font-size: 0.88rem;
	line-height: 1.45;
	color: var(--c-ink-soft);
	margin-top: 2px;
}
.sf-plot__check {
	position: absolute;
	top: var(--s-3);
	right: var(--s-3);
	width: 30px;
	height: 30px;
	display: grid;
	place-items: center;
	background: var(--c-accent);
	color: var(--c-accent-contrast);
	border-radius: 999px;
	opacity: 0;
	transform: scale(0.6);
	transition: opacity var(--t), transform var(--t);
	box-shadow: 0 2px 0 var(--c-ink);
}
.sf-plot[data-selected="true"] .sf-plot__check { opacity: 1; transform: scale(1); }
.sf-plot__check svg { width: 14px; height: 14px; }

.sf-plot-custom {
	padding: var(--s-5);
	background: var(--c-card);
	border: var(--stroke) solid var(--c-line-soft);
	border-radius: var(--r-lg);
}
.sf-plot-custom__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--s-3);
	flex-wrap: wrap;
	margin-bottom: var(--s-3);
}
.sf-plot-custom__title { margin: 0; }
.sf-plot-custom__hint {
	font-size: 0.86rem;
	color: var(--c-ink-mute);
	margin: 0;
}
.sf-plot-custom__count {
	text-align: right;
	font-family: var(--ff-mono);
	font-size: 0.78rem;
	color: var(--c-ink-mute);
	margin: var(--s-2) 0 0;
}

/* -------- Step 4: Email + GDPR -------- */
.sf-crea-contact {
	margin-bottom: var(--s-6);
	padding: var(--s-5);
	background: var(--c-card);
	border: var(--stroke) solid var(--c-line-soft);
	border-radius: var(--r-lg);
}
.sf-crea-contact__head { margin-bottom: var(--s-4); }
.sf-crea-contact__title { margin: 0 0 var(--s-2); }
.sf-crea-contact__lead {
	margin: 0;
	color: var(--c-ink-soft);
	font-size: 0.92rem;
	line-height: 1.5;
}
.sf-crea-contact .sf-field { margin-bottom: var(--s-4); }

.sf-gdpr {
	display: flex;
	align-items: flex-start;
	gap: var(--s-3);
	padding: var(--s-3);
	background: var(--c-card-soft);
	border-radius: var(--r-md);
	cursor: pointer;
	user-select: none;
	position: relative;
	transition: background var(--t);
}
.sf-gdpr:hover { background: var(--c-paper-deep); }
.sf-gdpr__input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.sf-gdpr__box {
	width: 22px;
	height: 22px;
	flex-shrink: 0;
	display: inline-grid;
	place-items: center;
	background: var(--c-card);
	border: var(--stroke-bold) solid var(--c-ink);
	border-radius: 5px;
	color: transparent;
	transition: background var(--t), color var(--t);
	margin-top: 1px;
}
.sf-gdpr__box svg { width: 14px; height: 14px; }
.sf-gdpr__input:checked ~ .sf-gdpr__box {
	background: var(--c-accent);
	color: var(--c-accent-contrast);
}
.sf-gdpr__input:focus-visible ~ .sf-gdpr__box {
	outline: 2px solid var(--c-accent);
	outline-offset: 3px;
}
.sf-gdpr.is-invalid {
	background: color-mix(in srgb, var(--c-vermilion) 10%, var(--c-card-soft));
	box-shadow: 0 0 0 2px var(--c-vermilion);
	animation: sf-shake 360ms ease-out;
}
.sf-gdpr.is-invalid .sf-gdpr__box {
	border-color: var(--c-vermilion);
}
@media (prefers-reduced-motion: reduce) {
	.sf-gdpr.is-invalid { animation: none; }
}
.sf-gdpr__text {
	flex: 1;
	font-size: 0.88rem;
	line-height: 1.5;
	color: var(--c-ink-soft);
	min-width: 0;
}
.sf-gdpr__text p { margin: 0; }
.sf-gdpr__text a { color: var(--c-ink); border-bottom: 1px solid var(--c-accent); }

/* Upload in-progress state on character card.
   Existing photo/icon/hint dim out; spinner ring + "CARICAMENTO" label layer
   on top so it's unmistakable that something is happening. */
.sf-char[data-uploading="true"] .sf-char__photo {
	border-color: var(--c-accent);
	border-style: solid;
	background: color-mix(in srgb, var(--c-accent) 12%, var(--c-card));
	pointer-events: none;
}
.sf-char[data-uploading="true"] .sf-char__photo .sf-char__photo-icon,
.sf-char[data-uploading="true"] .sf-char__photo .sf-char__photo-hint,
.sf-char[data-uploading="true"] .sf-char__photo img {
	opacity: 0.18;
	transition: opacity var(--t);
	filter: blur(1px);
}

/* Spinner ring — conic-gradient sweep. */
.sf-char[data-uploading="true"] .sf-char__photo::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 52px;
	height: 52px;
	margin: -26px 0 0 -26px;
	border-radius: 50%;
	background: conic-gradient(from 0deg, transparent 0deg, var(--c-accent) 270deg, transparent 360deg);
	-webkit-mask: radial-gradient(circle, transparent 54%, #000 56%);
	        mask: radial-gradient(circle, transparent 54%, #000 56%);
	animation: sf-char-spin 0.9s linear infinite;
	z-index: 3;
}

/* "CARICAMENTO" text under the spinner — sits inside the 128px circle */
.sf-char[data-uploading="true"] .sf-char__photo::after {
	content: "CARICAMENTO";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 18px;
	text-align: center;
	font-family: var(--ff-mono);
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	color: var(--c-accent);
	z-index: 3;
	animation: sf-char-pulse 1.4s ease-in-out infinite;
}

/* Subtle dashed background ring to reinforce "work in progress" vibe */
.sf-char[data-uploading="true"] .sf-char {
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-accent) 20%, transparent);
}

@keyframes sf-char-spin {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}
@keyframes sf-char-pulse {
	0%, 100% { opacity: 0.7; }
	50%      { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
	.sf-char[data-uploading="true"] .sf-char__photo::before,
	.sf-char[data-uploading="true"] .sf-char__photo::after {
		animation: none;
	}
}

/* -------- Step 4: Summary + fake gen -------- */
.sf-summary {
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
	margin-bottom: var(--s-6);
}

.sf-summary__block {
	padding: var(--s-5);
	background: var(--c-card);
	border: var(--stroke) solid var(--c-line-soft);
	border-radius: var(--r-lg);
}
.sf-summary__head {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	margin-bottom: var(--s-4);
}
.sf-summary__num {
	font-family: var(--ff-mono);
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	background: var(--c-ink);
	color: var(--c-paper);
	padding: 4px 8px;
	border-radius: 4px;
}
.sf-summary__title {
	font-family: var(--ff-display);
	font-weight: 600;
	font-size: 1.35rem;
	letter-spacing: -0.01em;
	color: var(--c-ink);
	margin: 0;
	flex: 1;
}
.sf-summary__edit {
	font-family: var(--ff-mono);
	font-size: 0.78rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--c-ink);
	border-bottom: var(--stroke) solid var(--c-ink);
	padding: 2px 0;
	transition: color var(--t), border-color var(--t);
}
.sf-summary__edit:hover {
	color: var(--c-accent);
	border-color: var(--c-accent);
}

.sf-summary__body { min-height: 44px; }
.sf-summary__empty {
	color: var(--c-ink-mute);
	font-style: italic;
	margin: 0;
}

.sf-summary__chars {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: var(--s-3);
}
.sf-summary__char {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	padding: var(--s-2);
	background: var(--c-paper-deep);
	border-radius: var(--r-md);
}
.sf-summary__avatar {
	width: 46px;
	height: 46px;
	border-radius: 999px;
	overflow: hidden;
	flex-shrink: 0;
	background: var(--c-paper);
	border: var(--stroke) solid var(--c-line-soft);
}
.sf-summary__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sf-summary__avatar--empty::before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background: repeating-linear-gradient(
		45deg,
		var(--c-paper-deep) 0 4px,
		var(--c-paper) 4px 8px
	);
}
.sf-summary__char-text {
	display: flex;
	flex-direction: column;
	line-height: 1.2;
	min-width: 0;
}
.sf-summary__char-text b { font-weight: 600; color: var(--c-ink); }
.sf-summary__char-text small { font-size: 0.78rem; color: var(--c-ink-mute); }

.sf-summary__style {
	display: flex;
	align-items: center;
	gap: var(--s-3);
}
.sf-summary__style b {
	font-family: var(--ff-display);
	font-weight: 600;
	font-size: 1.15rem;
	color: var(--c-ink);
}
.sf-summary__thumb {
	width: 60px;
	height: 60px;
	border-radius: var(--r-md);
	overflow: hidden;
	background: var(--c-paper-deep);
	flex-shrink: 0;
}
.sf-summary__thumb img { width: 100%; height: 100%; object-fit: cover; }

.sf-summary__plot {
	margin: 0;
	white-space: pre-wrap;
	line-height: 1.55;
	color: var(--c-ink-soft);
	font-size: 0.96rem;
}

/* Pitch card */
.sf-crea-pitch {
	padding: var(--s-6);
	background: var(--c-accent-soft);
	border: var(--stroke) solid var(--c-ink);
	border-radius: var(--r-lg);
	box-shadow: 5px 5px 0 var(--c-ink);
}
.sf-crea-pitch__title { margin: 0 0 var(--s-4); }
.sf-crea-pitch__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--s-4);
}
.sf-crea-pitch__list li {
	display: flex;
	gap: var(--s-3);
	align-items: flex-start;
	line-height: 1.5;
	color: var(--c-ink);
}
.sf-crea-pitch__num {
	font-family: var(--ff-mono);
	font-weight: 700;
	font-size: 0.78rem;
	letter-spacing: 0.14em;
	color: var(--c-accent);
	background: var(--c-card);
	padding: 4px 8px;
	border-radius: 4px;
	flex-shrink: 0;
}

/* While generating (or after done), hide the pre-generation content
   inside step 4 but keep the step itself active so genEl/doneEl stay visible. */
.sf-cstep[data-gen="running"] > .sf-cstep__head,
.sf-cstep[data-gen="running"] > .sf-summary,
.sf-cstep[data-gen="running"] > .sf-crea-contact,
.sf-cstep[data-gen="running"] > .sf-crea-pitch,
.sf-cstep[data-gen="done"] > .sf-cstep__head,
.sf-cstep[data-gen="done"] > .sf-summary,
.sf-cstep[data-gen="done"] > .sf-crea-contact,
.sf-cstep[data-gen="done"] > .sf-crea-pitch {
	display: none;
}

/* Fake generation */
.sf-genfake {
	margin-top: var(--s-6);
	padding: var(--s-8) var(--s-6);
	background: var(--c-ink);
	color: var(--c-paper);
	border-radius: var(--r-xl);
	text-align: center;
	position: relative;
	overflow: hidden;
}
.sf-genfake::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 20% 30%, color-mix(in srgb, var(--c-accent) 30%, transparent) 0, transparent 40%),
		radial-gradient(circle at 80% 70%, color-mix(in srgb, var(--c-sunshine) 20%, transparent) 0, transparent 40%);
	opacity: 0.6;
	pointer-events: none;
}
.sf-genfake__inner { position: relative; z-index: 1; max-width: 520px; margin: 0 auto; }
.sf-genfake__spinner {
	display: flex;
	gap: var(--s-2);
	justify-content: center;
	margin-bottom: var(--s-5);
}
.sf-genfake__spinner span {
	width: 10px;
	height: 10px;
	border-radius: 999px;
	background: var(--c-accent);
	animation: sf-bounce 1.2s ease-in-out infinite;
}
.sf-genfake__spinner span:nth-child(2) { animation-delay: 0.15s; background: var(--c-sunshine); }
.sf-genfake__spinner span:nth-child(3) { animation-delay: 0.3s;  background: var(--c-mint); }
.sf-genfake__spinner span:nth-child(4) { animation-delay: 0.45s; background: var(--c-vermilion); }
@keyframes sf-bounce {
	0%, 80%, 100% { transform: translateY(0) scale(1); opacity: 0.8; }
	40% { transform: translateY(-12px) scale(1.2); opacity: 1; }
}
.sf-genfake__label {
	font-family: var(--ff-display);
	font-size: 1.6rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	margin: 0 0 var(--s-5);
	min-height: 1.4em;
}
.sf-genfake__bar {
	width: 100%;
	height: 6px;
	background: color-mix(in srgb, var(--c-paper) 15%, transparent);
	border-radius: 999px;
	overflow: hidden;
	margin-bottom: var(--s-4);
}
.sf-genfake__bar span {
	display: block;
	height: 100%;
	width: 0%;
	background: linear-gradient(90deg, var(--c-accent), var(--c-sunshine));
	border-radius: inherit;
	transition: width 800ms cubic-bezier(.2,.6,.2,1);
}
.sf-genfake__note {
	font-family: var(--ff-mono);
	font-size: 0.78rem;
	letter-spacing: 0.1em;
	color: color-mix(in srgb, var(--c-paper) 65%, transparent);
	text-transform: uppercase;
	margin: 0;
}

/* Done state */
.sf-gendone {
	margin-top: var(--s-6);
	padding: var(--s-8) var(--s-6);
	background: var(--c-card);
	border: var(--stroke-bold) solid var(--c-ink);
	border-radius: var(--r-xl);
	box-shadow: 8px 8px 0 var(--c-accent);
	text-align: center;
	animation: sf-pop-in 520ms cubic-bezier(.3,1.2,.3,1);
}
@keyframes sf-pop-in {
	0%   { opacity: 0; transform: scale(0.9); }
	60%  { transform: scale(1.02); }
	100% { opacity: 1; transform: scale(1); }
}

.sf-gendone__head { max-width: 56ch; margin: 0 auto var(--s-7); }
.sf-gendone__icon {
	width: 64px;
	height: 64px;
	color: var(--c-mint);
	margin: 0 auto var(--s-3);
}
.sf-gendone__kicker {
	font-family: var(--ff-mono);
	font-size: 0.74rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--c-ink-mute);
	margin: 0 0 var(--s-2);
}
.sf-gendone__title { margin: 0 0 var(--s-3); }
.sf-gendone__lead {
	color: var(--c-ink-soft);
	max-width: 52ch;
	margin: 0 auto;
	font-size: var(--fs-body);
}

/* --- Anteprima placeholder tavole --- */
.sf-preview {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--s-5);
	max-width: 780px;
	margin: 0 auto var(--s-5);
	text-align: left;
}

.sf-preview__tav {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
}

.sf-preview__cap {
	font-family: var(--ff-mono);
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--c-ink-mute);
	text-align: center;
}

.sf-preview__page {
	position: relative;
	aspect-ratio: 3/4;
	background: var(--c-paper);
	border: var(--stroke-bold) solid var(--c-ink);
	border-radius: var(--r-md);
	overflow: hidden;
	box-shadow: 5px 5px 0 var(--c-accent);
	transition: transform var(--t);
}
.sf-preview__tav:hover .sf-preview__page {
	transform: translate(-2px, -2px);
	box-shadow: 7px 7px 0 var(--c-accent);
}

/* Real AI-generated images — shown in place of the SVG placeholders when
   the preview pipeline has completed. Share the page framing (border,
   shadow) with .sf-preview__page so the two variants look cohesive. */
.sf-preview__real {
	position: relative;
	aspect-ratio: 3/4;
	background: var(--c-paper);
	border: var(--stroke-bold) solid var(--c-ink);
	border-radius: var(--r-md);
	overflow: hidden;
	box-shadow: 5px 5px 0 var(--c-accent);
	transition: transform var(--t), box-shadow var(--t);
}
.sf-preview__real img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.sf-preview__tav:hover .sf-preview__real {
	transform: translate(-2px, -2px);
	box-shadow: 7px 7px 0 var(--c-accent);
}

/* Error state inside the done view — kicks in when preview_failed. */
.sf-gendone__error {
	max-width: 560px;
	margin: var(--s-5) auto 0;
	padding: var(--s-5);
	background: color-mix(in srgb, var(--c-vermilion) 8%, var(--c-card));
	border: var(--stroke) solid var(--c-vermilion);
	border-radius: var(--r-md);
	text-align: center;
}
.sf-gendone__error-msg {
	margin: 0 0 var(--s-4);
	color: var(--c-vermilion);
	font-weight: 500;
	font-size: 0.95rem;
}

/* Halftone overlay shared across both panels */
.sf-preview__halftone {
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--c-ink) 18%, transparent) 0 1.2px, transparent 1.3px);
	background-size: 7px 7px;
	opacity: 0.55;
	pointer-events: none;
	z-index: 1;
}

/* Cover specifics */
.sf-preview__cover-meta {
	position: absolute;
	top: var(--s-3);
	left: var(--s-3);
	right: var(--s-3);
	display: flex;
	justify-content: space-between;
	gap: var(--s-3);
	font-family: var(--ff-mono);
	font-size: 0.64rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--c-ink);
	z-index: 2;
}
.sf-preview__cover-edition {
	background: var(--c-ink);
	color: var(--c-paper);
	padding: 2px 6px;
	border-radius: 3px;
}
.sf-preview__cover-title {
	position: absolute;
	bottom: var(--s-4);
	left: var(--s-3);
	right: var(--s-3);
	z-index: 3;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.sf-preview__cover-line {
	font-family: var(--ff-mono);
	font-size: 0.7rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--c-ink-mute);
}
.sf-preview__cover-hero {
	font-family: var(--ff-display);
	font-weight: 800;
	font-size: clamp(1.4rem, 1rem + 2vw, 2.2rem);
	line-height: 0.9;
	color: var(--c-ink);
	letter-spacing: -0.02em;
	word-break: break-word;
}

.sf-preview__silhouette {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	color: var(--c-ink);
	opacity: 0.22;
	z-index: 1;
}
.sf-preview__silhouette svg { width: 55%; height: 55%; }

.sf-preview__burst {
	position: absolute;
	top: var(--s-5);
	right: calc(var(--s-3) * -1);
	width: 70px;
	height: 70px;
	color: var(--c-accent);
	display: grid;
	place-items: center;
	transform: rotate(14deg);
	z-index: 4;
}
.sf-preview__burst svg { width: 100%; height: 100%; position: absolute; inset: 0; }
.sf-preview__burst span {
	position: relative;
	font-family: var(--ff-mono);
	font-size: 0.6rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	color: var(--c-accent-contrast);
}

.sf-preview__stripe {
	position: absolute;
	bottom: 30%;
	left: 0;
	right: 0;
	height: 18px;
	background: repeating-linear-gradient(
		-45deg,
		var(--c-ink) 0 6px,
		var(--c-sunshine) 6px 12px
	);
	z-index: 2;
	opacity: 0.9;
}

/* Page (second tavola) — 3-panel grid */
.sf-preview__page--grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1.3fr 1fr;
	gap: 5px;
	padding: 5px;
	background: var(--c-ink);
}

.sf-preview__panel {
	position: relative;
	background: var(--c-paper);
	overflow: hidden;
	z-index: 1;
}
.sf-preview__panel--1 { grid-column: 1 / 3; }
.sf-preview__panel--2 { grid-column: 1; grid-row: 2; }
.sf-preview__panel--3 { grid-column: 2; grid-row: 2; }

.sf-preview__skeleton {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		100deg,
		var(--c-paper-deep) 0%,
		var(--c-paper-soft) 20%,
		var(--c-paper-deep) 40%,
		var(--c-paper-deep) 100%
	);
	background-size: 220% 100%;
	animation: sf-shimmer 2.4s ease-in-out infinite;
}
@keyframes sf-shimmer {
	0%   { background-position: 100% 0; }
	100% { background-position: -100% 0; }
}

.sf-preview__bubble {
	position: absolute;
	background: var(--c-card);
	border: 2px solid var(--c-ink);
	border-radius: 14px;
	padding: 6px 10px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 80px;
	z-index: 3;
}
.sf-preview__bubble--tl { top: 10px; left: 10px; }
.sf-preview__bubble::after {
	content: "";
	position: absolute;
	bottom: -8px;
	left: 18px;
	border: 6px solid transparent;
	border-top-color: var(--c-ink);
}
.sf-preview__bubble::before {
	content: "";
	position: absolute;
	bottom: -5px;
	left: 20px;
	border: 4px solid transparent;
	border-top-color: var(--c-card);
	z-index: 1;
}
.sf-preview__line {
	display: block;
	height: 5px;
	background: var(--c-line-soft);
	border-radius: 999px;
}

.sf-preview__caption-box {
	position: absolute;
	bottom: 8px;
	left: 8px;
	right: 8px;
	background: var(--c-sunshine);
	border: 2px solid var(--c-ink);
	padding: 4px 8px;
	z-index: 3;
}

.sf-preview__sfx {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	font-family: var(--ff-display);
	font-weight: 800;
	font-style: italic;
	font-size: 1.4rem;
	color: var(--c-vermilion);
	-webkit-text-stroke: 2px var(--c-ink);
	text-stroke: 2px var(--c-ink);
	letter-spacing: -0.02em;
	transform: rotate(-6deg);
	z-index: 3;
	text-shadow:
		2px 2px 0 var(--c-ink),
		-1px -1px 0 var(--c-ink),
		1px -1px 0 var(--c-ink),
		-1px 1px 0 var(--c-ink);
}

.sf-preview__note {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	margin: 0 auto var(--s-6);
	padding: var(--s-3) var(--s-4);
	max-width: 60ch;
	background: var(--c-card-soft);
	border-radius: var(--r-md);
	color: var(--c-ink-mute);
	font-size: 0.86rem;
	text-align: left;
}
.sf-preview__note svg { width: 18px; height: 18px; flex-shrink: 0; }

.sf-gendone__actions {
	display: flex;
	gap: var(--s-3);
	justify-content: center;
	flex-wrap: wrap;
}

/* -------- Tier buy buttons (step 4 done screen) -------- */
.sf-gendone__tiers {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--s-4);
	margin: var(--s-6) 0 var(--s-5);
}
.sf-tier {
	position: relative;
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-rows: auto auto;
	align-items: baseline;
	gap: var(--s-2) var(--s-4);
	padding: var(--s-5) var(--s-5) var(--s-4);
	background: var(--c-card);
	border: var(--stroke-bold) solid var(--c-ink);
	border-radius: var(--r-lg);
	box-shadow: 4px 4px 0 var(--c-ink);
	cursor: pointer;
	text-align: left;
	font-family: inherit;
	color: var(--c-ink);
	transition: transform var(--t), box-shadow var(--t), background var(--t);
}
.sf-tier:hover {
	transform: translate(-1px, -1px);
	box-shadow: 6px 6px 0 var(--c-ink);
}
.sf-tier:active {
	transform: translate(2px, 2px);
	box-shadow: 2px 2px 0 var(--c-ink);
}
.sf-tier:disabled {
	opacity: 0.55;
	cursor: wait;
	transform: none;
	box-shadow: 4px 4px 0 var(--c-ink);
}
.sf-tier--plus {
	background: var(--c-accent);
	color: var(--c-accent-contrast);
}
.sf-tier__flag {
	position: absolute;
	top: -12px;
	right: var(--s-4);
	padding: 4px var(--s-3);
	background: var(--c-ink);
	color: var(--c-paper);
	font-family: var(--ff-mono);
	font-size: 0.68rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	border-radius: 999px;
}
.sf-tier__pages {
	grid-column: 1;
	grid-row: 1;
	font-family: var(--ff-display);
	font-size: 1.4rem;
	font-weight: 700;
	letter-spacing: -0.01em;
}
.sf-tier__price {
	grid-column: 2;
	grid-row: 1 / span 2;
	display: flex;
	align-items: baseline;
	gap: 2px;
	font-family: var(--ff-display);
	font-weight: 800;
	line-height: 1;
}
.sf-tier__price-amount {
	font-size: 2.8rem;
	letter-spacing: -0.02em;
}
.sf-tier__price-currency {
	font-size: 1.4rem;
}
.sf-tier__hint {
	grid-column: 1;
	grid-row: 2;
	font-family: var(--ff-mono);
	font-size: 0.76rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--c-ink-mute);
}
.sf-tier--plus .sf-tier__hint { color: color-mix(in srgb, var(--c-accent-contrast) 75%, transparent); }

@media (max-width: 560px) {
	.sf-gendone__tiers { grid-template-columns: 1fr; gap: var(--s-3); }
	.sf-tier { padding: var(--s-4); }
	.sf-tier__price-amount { font-size: 2.4rem; }
}

/* -------- Simulated order confirmation (post-tier click, phase 2 demo) -------- */
.sf-gensim {
	padding: var(--s-8) var(--s-6);
}
.sf-gensim__card {
	max-width: 640px;
	margin: 0 auto;
	padding: var(--s-7) var(--s-6);
	background: var(--c-card);
	border: var(--stroke-bold) solid var(--c-ink);
	border-radius: var(--r-lg);
	box-shadow: 6px 6px 0 var(--c-ink);
	text-align: center;
}
.sf-gensim__check {
	display: grid;
	place-items: center;
	width: 72px;
	height: 72px;
	margin: 0 auto var(--s-4);
	background: var(--c-accent);
	color: var(--c-accent-contrast);
	border-radius: 50%;
	border: var(--stroke-bold) solid var(--c-ink);
	box-shadow: 3px 3px 0 var(--c-ink);
}
.sf-gensim__check svg { width: 36px; height: 36px; }
.sf-gensim__kicker {
	font-family: var(--ff-mono);
	font-size: 0.76rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--c-ink-mute);
	margin: 0 0 var(--s-2);
}
.sf-gensim__title {
	margin: 0 0 var(--s-3);
}
.sf-gensim__lead {
	margin: 0 0 var(--s-5);
	color: var(--c-ink-soft);
	font-size: 1rem;
}
.sf-gensim__facts {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--s-3);
	padding: var(--s-4);
	margin: 0 0 var(--s-5);
	background: var(--c-paper);
	border: var(--stroke) solid var(--c-line-soft);
	border-radius: var(--r-md);
	text-align: left;
}
.sf-gensim__facts > div { min-width: 0; }
.sf-gensim__facts dt {
	font-family: var(--ff-mono);
	font-size: 0.68rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--c-ink-mute);
	margin-bottom: 4px;
}
.sf-gensim__facts dd {
	margin: 0;
	font-weight: 600;
	font-size: 0.95rem;
	word-break: break-word;
}
.sf-gensim__note {
	margin: 0 0 var(--s-5);
	padding: var(--s-3) var(--s-4);
	background: color-mix(in srgb, var(--c-accent) 8%, var(--c-card));
	border-left: 3px solid var(--c-accent);
	border-radius: 0 var(--r-sm) var(--r-sm) 0;
	color: var(--c-ink-soft);
	font-size: 0.88rem;
	line-height: 1.55;
	text-align: left;
}
.sf-gensim__actions {
	display: flex;
	justify-content: center;
	gap: var(--s-3);
	flex-wrap: wrap;
}

@media (max-width: 560px) {
	.sf-gensim { padding: var(--s-6) var(--s-4); }
	.sf-gensim__card { padding: var(--s-5) var(--s-4); }
	.sf-gensim__facts { grid-template-columns: 1fr; gap: var(--s-3); }
}

@media (max-width: 560px) {
	.sf-preview { grid-template-columns: 1fr; gap: var(--s-4); }
	.sf-preview__page { aspect-ratio: 3/4; }
	.sf-preview__cover-hero { font-size: 1.6rem; }
	.sf-preview__sfx { font-size: 1.1rem; }
	.sf-preview__burst { width: 54px; height: 54px; }
}

/* -------- Wizard nav (prev/next/submit) -------- */
.sf-crea__nav {
	display: flex;
	justify-content: space-between;
	gap: var(--s-3);
	margin-top: var(--s-4);
	padding-top: var(--s-5);
	border-top: var(--stroke) solid var(--c-line-soft);
}
.sf-crea__next, .sf-crea__submit { margin-left: auto; }

/* -------- Responsive: tablet -------- */
@media (max-width: 860px) {
	.sf-cprog {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--s-2);
	}
	.sf-cprog__btn { padding: var(--s-3); }
	.sf-cprog__hint { display: none; }
	.sf-cprog__label { font-size: 0.82rem; }
	.sf-cprog__num { width: 28px; height: 28px; font-size: 0.72rem; }
	.sf-cprog__item + .sf-cprog__item::before { display: none; }
}

/* -------- Responsive: phone -------- */
@media (max-width: 560px) {
	.sf-crea { padding-top: var(--s-5); }
	.sf-crea__head { margin-bottom: var(--s-6); }

	.sf-cprog {
		grid-template-columns: repeat(4, 1fr);
		gap: var(--s-1);
		margin-bottom: var(--s-6);
	}
	.sf-cprog__btn {
		flex-direction: column;
		align-items: center;
		gap: var(--s-2);
		padding: var(--s-3) var(--s-2);
		text-align: center;
	}
	.sf-cprog__num { width: 32px; height: 32px; }
	.sf-cprog__text { align-items: center; }
	.sf-cprog__label { font-size: 0.74rem; }
	.sf-cprog__check {
		position: absolute;
		top: 6px;
		right: 6px;
		width: 14px;
		height: 14px;
		margin: 0;
	}
	.sf-cprog__item[data-state="current"] .sf-cprog__btn {
		box-shadow: 3px 3px 0 var(--c-ink);
	}

	.sf-chars { grid-template-columns: 1fr; }
	.sf-styles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
	.sf-style__card { padding: var(--s-3); }
	.sf-style__title { font-size: 1rem; }
	.sf-style__desc { font-size: 0.82rem; }

	.sf-plots { grid-template-columns: 1fr; }

	.sf-crea__nav {
		position: sticky;
		bottom: 0;
		background: var(--c-paper);
		padding-bottom: calc(var(--s-4) + env(safe-area-inset-bottom, 0));
		margin-left: calc(var(--s-5) * -1);
		margin-right: calc(var(--s-5) * -1);
		padding-left: var(--s-5);
		padding-right: var(--s-5);
		z-index: 5;
		border-top: var(--stroke) solid var(--c-line-soft);
	}
	.sf-crea__nav .sf-btn {
		flex: 1;
		justify-content: center;
	}

	.sf-summary__head { flex-wrap: wrap; }
	.sf-summary__chars { grid-template-columns: 1fr; }

	.sf-genfake { padding: var(--s-6) var(--s-5); }
	.sf-genfake__label { font-size: 1.25rem; }
	.sf-gendone { padding: var(--s-6) var(--s-5); }
	.sf-gendone__actions .sf-btn { flex: 1; min-width: 140px; }
}