/**
 * Sociopup Portraits — detailed atelier widget.
 * Inherits the theme's tokens when present, with safe fallbacks.
 */
.spp {
	--spp-canvas: var(--canvas, #FBF7F0);
	--spp-canvas-deep: var(--canvas-deep, #F3EBDD);
	--spp-paper: var(--paper, #FFFFFF);
	--spp-ink: var(--ink, #1A1614);
	--spp-ink-soft: var(--ink-soft, #4A4039);
	--spp-clay: var(--clay, #C65D3B);
	--spp-clay-deep: var(--clay-deep, #A8482B);
	--spp-sage: var(--sage, #7C8471);
	--spp-gold: var(--gold, #C9A24B);
	--spp-line: var(--line, #E5DACA);
	--spp-body: var(--body, system-ui, -apple-system, "Segoe UI", sans-serif);
	--spp-display: var(--display, Georgia, serif);
	--spp-shadow: 0 2px 8px rgba(26,22,20,0.05), 0 18px 50px rgba(26,22,20,0.10);
	--spp-shadow-lg: 0 10px 24px rgba(26,22,20,0.10), 0 36px 80px rgba(26,22,20,0.16);

	position: relative;
	font-family: var(--spp-body);
	color: var(--spp-ink);
	background:
		radial-gradient(120% 80% at 100% 0%, rgba(201,162,75,0.07), transparent 55%),
		linear-gradient(180deg, var(--spp-paper) 0%, var(--spp-canvas) 100%);
	border: 1px solid var(--spp-line);
	border-radius: 26px;
	padding: clamp(1.6rem, 1.1rem + 2.4vw, 3.2rem);
	max-width: 1120px;
	margin-inline: auto;
	box-shadow: var(--spp-shadow);
	overflow: hidden;
	box-sizing: border-box;
}
.spp *, .spp *::before, .spp *::after { box-sizing: border-box; }

/* Ambient corner glow */
.spp-aura {
	position: absolute;
	top: -30%; right: -15%;
	width: 55%; aspect-ratio: 1;
	background: radial-gradient(circle, rgba(198,93,59,0.12), transparent 65%);
	pointer-events: none;
	z-index: 0;
}
.spp > *:not(.spp-aura) { position: relative; z-index: 1; }

/* ---- Header ---- */
.spp-head { text-align: center; margin-bottom: clamp(1.8rem, 1.2rem + 2.4vw, 3rem); }
.spp-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--spp-clay);
	margin-bottom: 0.9rem;
}
.spp-eyebrow::before, .spp-eyebrow::after {
	content: "";
	width: 22px; height: 1.5px;
	background: linear-gradient(90deg, transparent, var(--spp-clay));
}
.spp-eyebrow::after { background: linear-gradient(90deg, var(--spp-clay), transparent); }
.spp-title {
	font-family: var(--spp-display);
	font-size: clamp(1.9rem, 1.4rem + 2vw, 3rem);
	line-height: 1.04;
	letter-spacing: -0.025em;
	margin: 0 0 0.7rem;
	color: var(--spp-ink);
	font-weight: 600;
}
.spp-sub {
	color: var(--spp-ink-soft);
	font-size: clamp(0.98rem, 0.93rem + 0.25vw, 1.12rem);
	margin: 0 auto;
	max-width: 52ch;
	line-height: 1.5;
}

/* ---- Grid ---- */
.spp-grid {
	display: grid;
	grid-template-columns: 1fr 1.05fr;
	gap: clamp(1.4rem, 0.9rem + 2.4vw, 3rem);
	align-items: start;
}

/* ---- Steps ---- */
.spp-step { display: flex; gap: 1rem; margin-bottom: 1.8rem; }
.spp-step:last-of-type { margin-bottom: 0; }
.spp-step-num {
	flex: none;
	width: 34px; height: 34px;
	border-radius: 50%;
	background: var(--spp-ink);
	color: var(--spp-canvas);
	display: grid;
	place-items: center;
	font-weight: 700;
	font-size: 0.95rem;
	font-family: var(--spp-display);
	box-shadow: 0 4px 12px rgba(26,22,20,0.2);
	position: relative;
}
.spp-step:not(:last-of-type) .spp-step-num::after {
	content: "";
	position: absolute;
	top: 40px; left: 50%;
	transform: translateX(-50%);
	width: 2px; height: calc(100% - 8px);
	background: linear-gradient(var(--spp-line), transparent);
}
.spp-step-body { flex: 1; min-width: 0; padding-top: 3px; }
.spp-label {
	display: block;
	font-weight: 700;
	font-size: 1rem;
	margin-bottom: 0.75rem;
	color: var(--spp-ink);
	letter-spacing: -0.01em;
}

/* ---- Drop zone ---- */
.spp-drop {
	position: relative;
	border: 2px dashed var(--spp-line);
	border-radius: 18px;
	background:
		linear-gradient(135deg, var(--spp-paper), var(--spp-canvas-deep));
	min-height: 172px;
	display: grid;
	place-items: center;
	cursor: pointer;
	transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
	overflow: hidden;
	text-align: center;
	padding: 1.2rem;
}
.spp-drop:hover, .spp-drop:focus-visible, .spp-drop.is-over {
	border-color: var(--spp-clay);
	box-shadow: inset 0 0 0 4px rgba(198,93,59,0.06), 0 8px 22px rgba(198,93,59,0.12);
	outline: none;
	transform: translateY(-2px);
}
.spp-drop.has-image { border-style: solid; padding: 0.5rem; }
.spp-drop-empty { display: grid; place-items: center; gap: 0.55rem; }
.spp-drop-ico {
	width: 54px; height: 54px;
	border-radius: 50%;
	background: var(--spp-canvas);
	color: var(--spp-clay);
	display: grid;
	place-items: center;
	box-shadow: 0 4px 12px rgba(198,93,59,0.15);
	margin-bottom: 0.2rem;
}
.spp-drop-text { font-weight: 700; color: var(--spp-ink); font-size: 1rem; }
.spp-drop-hint { font-size: 0.78rem; color: var(--spp-sage); letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600; }
.spp-thumb { width: 100%; max-height: 320px; object-fit: contain; border-radius: 14px; display: block; }
.spp-clear {
	position: absolute;
	top: 12px; right: 12px;
	width: 32px; height: 32px;
	border-radius: 50%;
	border: none;
	background: rgba(26,22,20,0.82);
	color: #fff;
	cursor: pointer;
	display: grid;
	place-items: center;
	backdrop-filter: blur(4px);
	transition: background 0.25s, transform 0.25s;
}
.spp-clear:hover { background: var(--spp-clay); transform: scale(1.08); }

/* ---- Style cards ---- */
.spp-styles { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
.spp-style {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	border: 1.5px solid var(--spp-line);
	background: var(--spp-paper);
	border-radius: 14px;
	padding: 0.65rem;
	cursor: pointer;
	transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
	text-align: left;
	font-family: var(--spp-body);
	position: relative;
	overflow: hidden;
}
.spp-style:hover { border-color: var(--spp-clay); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(26,22,20,0.08); }
.spp-style.is-active { border-color: var(--spp-ink); box-shadow: 0 0 0 2px var(--spp-ink), 0 10px 24px rgba(26,22,20,0.12); }
.spp-style-swatch {
	flex: none;
	width: 46px; height: 46px;
	border-radius: 10px;
	display: grid;
	place-items: center;
	box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18), 0 2px 6px rgba(0,0,0,0.18);
}
.spp-style-emoji { font-size: 1.25rem; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3)); }
.spp-style-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.spp-style-name { font-weight: 700; font-size: 0.9rem; color: var(--spp-ink); line-height: 1.2; }
.spp-style-blurb { font-size: 0.74rem; color: var(--spp-sage); line-height: 1.2; }
.spp-style-check {
	position: absolute;
	top: 8px; right: 8px;
	width: 20px; height: 20px;
	border-radius: 50%;
	background: var(--spp-ink);
	color: #fff;
	display: grid;
	place-items: center;
	opacity: 0;
	transform: scale(0.5);
	transition: opacity 0.2s, transform 0.2s;
}
.spp-style.is-active .spp-style-check { opacity: 1; transform: scale(1); }

/* ---- Generate button ---- */
.spp-generate {
	width: 100%;
	border: none;
	background: linear-gradient(135deg, var(--spp-clay), var(--spp-clay-deep));
	color: #fff;
	border-radius: 100px;
	padding: 1.05rem 1.6rem;
	font-size: 1.08rem;
	font-weight: 700;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	transition: transform 0.25s, box-shadow 0.25s, opacity 0.25s;
	font-family: var(--spp-body);
	box-shadow: 0 10px 26px rgba(198,93,59,0.32);
	letter-spacing: 0.01em;
}
.spp-generate:hover:not(:disabled) { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(198,93,59,0.42); }
.spp-generate:active:not(:disabled) { transform: translateY(-1px); }
.spp-generate:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; }
.spp-generate-arrow { transition: transform 0.25s; }
.spp-generate:hover:not(:disabled) .spp-generate-arrow { transform: translateX(4px); }
.spp-note {
	font-size: 0.8rem;
	color: var(--spp-ink-soft);
	margin: 0.85rem 0 0;
	line-height: 1.45;
	display: flex;
	align-items: flex-start;
	color: var(--spp-sage);
}

/* ---- Spinner ---- */
.spp-spinner {
	width: 18px; height: 18px;
	border: 2.5px solid rgba(255,255,255,0.35);
	border-top-color: #fff;
	border-radius: 50%;
	animation: spp-spin 0.7s linear infinite;
	display: inline-block;
	flex: none;
}
.spp-spinner-lg {
	width: 46px; height: 46px;
	border-width: 4px;
	border-color: rgba(198,93,59,0.2);
	border-top-color: var(--spp-clay);
}
@keyframes spp-spin { to { transform: rotate(360deg); } }

/* ---- Error ---- */
.spp-error {
	margin-top: 1.1rem;
	background: rgba(214,54,56,0.07);
	border: 1px solid rgba(214,54,56,0.28);
	color: #a3231f;
	border-radius: 12px;
	padding: 0.85rem 1rem;
	font-size: 0.9rem;
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	line-height: 1.4;
}
.spp-error-ico {
	flex: none;
	width: 20px; height: 20px;
	border-radius: 50%;
	background: #d63638;
	color: #fff;
	font-weight: 800;
	font-size: 0.8rem;
	display: grid;
	place-items: center;
}

/* ---- Result: ornate gallery frame ---- */
.spp-result-frame {
	position: relative;
	border-radius: 16px;
	padding: 14px;
	background:
		linear-gradient(145deg, #d8c184 0%, #b8923f 18%, #8a6a28 50%, #b8923f 82%, #e6cf94 100%);
	box-shadow: var(--spp-shadow-lg);
}
.spp-frame-inner {
	position: relative;
	aspect-ratio: 4 / 5;
	border-radius: 6px;
	background: var(--spp-canvas-deep);
	overflow: hidden;
	display: grid;
	place-items: center;
	box-shadow: inset 0 0 0 3px rgba(0,0,0,0.18), inset 0 2px 16px rgba(0,0,0,0.22);
}
.spp-frame-plate {
	position: absolute;
	bottom: -11px; left: 50%;
	transform: translateX(-50%);
	background: linear-gradient(145deg,#c9a24b,#9a7a2e);
	color: #2a2014;
	font-size: 0.62rem;
	font-weight: 800;
	letter-spacing: 0.18em;
	padding: 0.3em 0.9em;
	border-radius: 4px;
	box-shadow: 0 3px 8px rgba(0,0,0,0.25);
	white-space: nowrap;
}
.spp-result-empty {
	display: grid;
	place-items: center;
	gap: 0.5rem;
	color: var(--spp-ink-soft);
	text-align: center;
	padding: 1.2rem;
}
.spp-empty-ico { color: var(--spp-sage); opacity: 0.6; margin-bottom: 0.3rem; }
.spp-empty-title { font-family: var(--spp-display); font-size: 1.1rem; color: var(--spp-ink-soft); font-weight: 600; }
.spp-empty-sub { font-size: 0.82rem; color: var(--spp-sage); }
.spp-output { width: 100%; height: 100%; object-fit: cover; animation: spp-reveal 0.7s var(--spp-ease, ease) both; }
@keyframes spp-reveal { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }

/* ---- Loading state ---- */
.spp-loading {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	align-content: center;
	gap: 1.2rem;
	background-color: var(--spp-canvas-deep);
	background-image:
		linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.45) 50%, transparent 70%);
	background-size: 220% 100%;
	animation: spp-shimmer 1.8s linear infinite;
	text-align: center;
	padding: 1.4rem;
	z-index: 2;
}
@keyframes spp-shimmer { to { background-position: -120% 0; } }
.spp-easel {
	width: 74px; height: 74px;
	border-radius: 50%;
	background: var(--spp-canvas);
	display: grid;
	place-items: center;
	box-shadow: 0 6px 18px rgba(0,0,0,0.1);
}
.spp-loading-text {
	font-weight: 700;
	color: var(--spp-ink);
	font-size: 0.98rem;
	font-family: var(--spp-display);
	transition: opacity 0.25s;
	min-height: 1.2em;
}
.spp-loading-bar {
	width: 60%;
	max-width: 180px;
	height: 5px;
	border-radius: 100px;
	background: rgba(26,22,20,0.1);
	overflow: hidden;
}
.spp-loading-fill {
	display: block;
	height: 100%;
	width: 40%;
	border-radius: 100px;
	background: linear-gradient(90deg, var(--spp-clay), var(--spp-gold));
	animation: spp-indeterminate 1.4s var(--spp-ease, ease-in-out) infinite;
}
@keyframes spp-indeterminate {
	0% { margin-left: -40%; }
	100% { margin-left: 100%; }
}

/* ---- Actions ---- */
.spp-actions { display: flex; gap: 0.7rem; margin-top: 1.8rem; flex-wrap: wrap; }
.spp-download, .spp-redo, .spp-order {
	flex: 1;
	min-width: 130px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	border-radius: 100px;
	padding: 0.85rem 1.1rem;
	font-weight: 700;
	font-size: 0.92rem;
	cursor: pointer;
	text-decoration: none;
	transition: all 0.25s;
	font-family: var(--spp-body);
	border: 1.5px solid transparent;
}
.spp-download { background: transparent; border-color: var(--spp-ink); color: var(--spp-ink); }
.spp-download:hover { background: var(--spp-ink); color: var(--spp-canvas); transform: translateY(-2px); }
.spp-redo { background: transparent; border-color: var(--spp-line); color: var(--spp-ink-soft); }
.spp-redo:hover { border-color: var(--spp-sage); color: var(--spp-ink); }
.spp-order { background: linear-gradient(135deg, var(--spp-clay), var(--spp-clay-deep)); color: #fff; box-shadow: 0 8px 20px rgba(198,93,59,0.3); }
.spp-order:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(198,93,59,0.4); }

/* ---- Responsive ---- */
@media (max-width: 780px) {
	.spp-grid { grid-template-columns: 1fr; gap: 2rem; }
	.spp-result { order: -1; }
	.spp-styles { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 460px) {
	.spp-styles { grid-template-columns: 1fr; }
	.spp-actions { flex-direction: column; }
	.spp-download, .spp-redo, .spp-order { width: 100%; }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
	.spp-spinner { animation-duration: 1.4s; }
	.spp-loading { animation: none; }
	.spp-loading-fill { animation-duration: 2.5s; }
	.spp-output { animation: none; }
	.spp-generate:hover:not(:disabled),
	.spp-style:hover,
	.spp-drop:hover { transform: none; }
}