/* =====================================================================
   Generator v2 — unified prototype
   CSS is a 1:1 port of the React artifact's styles, namespaced under
   `.genv2-section` so it can't bleed into the existing theme.
   ===================================================================== */

/* Anchor for #generator deep-links from header/footer/other pages —
   offsets the fixed site-header so the section top isn't hidden under it. */
.genv2-anchor {
	display: block;
	scroll-margin-top: var(--header-height, 84px);
}

.genv2-section {
	--v2-primary:        #6050b0;
	--v2-primary-hover:  #5040a0;
	--v2-primary-light:  rgba(196, 184, 255, 0.30);
	--v2-primary-lilac:  #c4b8ff;
	--v2-accent-brown:   #7a5744;
	--v2-text:           #313330;
	--v2-text-muted:     #5e5f5c;
	--v2-bg:             #fcfcfc;
	--v2-bg-white:       #ffffff;
	--v2-border:         rgba(178, 178, 174, 0.20);
	--v2-border-strong:  rgba(178, 178, 174, 0.45);
	--v2-success:        #10b981;
	--v2-danger:         #d9534f;

	--v2-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
	--v2-shadow-md: 0 4px 20px rgba(0, 0, 0, 0.07);
	--v2-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.10);
	--v2-shadow-primary: 0 12px 24px -6px rgba(96, 80, 176, 0.35);
	--v2-shadow-primary-hover: 0 16px 32px -6px rgba(96, 80, 176, 0.45);

	--v2-gradient: linear-gradient(135deg, #6050b0 0%, #c4b8ff 100%);
	--v2-ease: cubic-bezier(0.4, 0, 0.2, 1);

	padding: 1.25rem 0 4rem;
	/* Outer wrapper inherits the page bg so the generator visually merges
	   into the rest of the home / single-wish layout. Inner cards keep
	   --v2-bg-white (#fff) and --v2-bg (#fcfcfc) for raised surfaces. */
	background: var(--color-page-bg);
	color: var(--v2-text);
	font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.genv2-section *,
.genv2-section *::before,
.genv2-section *::after { box-sizing: border-box; }

.genv2-section .container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 1rem;
}

/* =================== HERO =================== */
.genv2-hero {
	text-align: center;
	padding: 2rem 1rem 2.5rem;
}
.genv2-badge {
	display: none;
}
.genv2-badge-dot {
	width: 8px; height: 8px;
	background: var(--v2-primary);
	border-radius: 50%;
}
.genv2-title {
	font-size: clamp(2.2rem, 4.5vw, 3.5rem);
	font-weight: 800;
	letter-spacing: -0.04em;
	line-height: 1.05;
	max-width: 900px;
	margin: 0 auto 1rem;
	text-wrap: balance;
}
.genv2-title-accent {
	color: var(--v2-accent-brown);
	font-style: italic;
	font-weight: 700;
}
.genv2-sub {
	color: var(--v2-text-muted);
	font-size: 1.05rem;
	max-width: 560px;
	margin: 0 auto 1.5rem;
	text-wrap: pretty;
}
.genv2-meta {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0 1.5rem;
	justify-content: center;
	list-style: none;
	padding: 0;
	margin: 0;
}
.genv2-meta li {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-size: .85rem;
	color: var(--v2-text-muted);
}
.genv2-meta-check {
	color: var(--v2-success);
	font-weight: 700;
	font-size: .95rem;
}

/* =================== TABS (mobile only) =================== */
.genv2-tabs {
	display: none;
}

/* =================== GENERATOR CARD =================== */
.genv2-wrap {
	background: var(--v2-bg-white);
	border: 1px solid var(--v2-border);
	border-radius: 24px;
	overflow: hidden;
	box-shadow: var(--v2-shadow-md);
}
.genv2-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 620px;
}
.genv2-form {
	padding: 2.25rem;
	display: flex;
	flex-direction: column;
}
.genv2-result {
	padding: 2.25rem;
	background: var(--v2-bg);
	border-left: 1px solid var(--v2-border);
	display: flex;
	flex-direction: column;
	position: relative;
	min-height: 620px;
}

.genv2-panel-h {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1.5rem;
}
.genv2-panel-h h3 {
	font-size: 1.3rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	margin: 0;
	color: var(--v2-text);
}
.genv2-kicker {
	font-size: .72rem;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	font-weight: 700;
	color: var(--v2-primary);
	display: block;
	margin-bottom: .15rem;
}

/* =================== INPUTS =================== */
.genv2-field { margin-bottom: 1.15rem; }

.genv2-label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: .78rem;
	font-weight: 600;
	margin-bottom: .5rem;
	color: var(--v2-text);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}
.genv2-label-hint {
	text-transform: none;
	letter-spacing: normal;
	font-weight: 500;
	color: var(--v2-text-muted);
	font-size: .72rem;
}

.genv2-input {
	width: 100%;
	padding: .75rem .8rem;
	border: 1px solid var(--v2-border);
	border-radius: 10px;
	font-family: inherit;
	font-size: .95rem;
	background: var(--v2-bg-white);
	color: var(--v2-text);
	transition-property: border-color, box-shadow;
	transition-duration: .2s;
	resize: vertical;
}
.genv2-input:focus {
	outline: none;
	border-color: var(--v2-primary);
	box-shadow: 0 0 0 3px rgba(96, 80, 176, 0.12);
}
.genv2-input::placeholder { color: #b0b0b0; }

select.genv2-input {
	appearance: none;
	padding-right: 2rem;
	background-image: linear-gradient(45deg, transparent 50%, var(--v2-text-muted) 50%),
					  linear-gradient(-45deg, transparent 50%, var(--v2-text-muted) 50%);
	background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%;
	background-size: 6px 6px;
	background-repeat: no-repeat;
}

/* =================== PILLS =================== */
.genv2-pills {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
}
.genv2-pill {
	padding: .45rem .95rem;
	border: 1px solid var(--v2-border);
	border-radius: 100px;
	background: var(--v2-bg-white);
	color: var(--v2-text-muted);
	cursor: pointer;
	font-size: .82rem;
	font-family: inherit;
	font-weight: 500;
	transition: all .2s var(--v2-ease);
	display: inline-flex;
	align-items: center;
	gap: .35rem;
}
.genv2-pill:hover {
	border-color: var(--v2-primary);
	color: var(--v2-primary);
}
.genv2-pill.active {
	background: var(--v2-primary);
	color: #fff;
	border-color: var(--v2-primary);
}
.genv2-pill.active:hover { background: var(--v2-primary-hover); }
.genv2-pill-emoji { font-size: .95em; opacity: .9; }

/* =================== LENGTH ROW =================== */
.genv2-len-row {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 0;
	background: var(--v2-bg);
	border-radius: 10px;
	padding: 4px;
	border: 1px solid var(--v2-border);
}
.genv2-len-btn {
	padding: .5rem;
	border: none;
	background: transparent;
	border-radius: 7px;
	font-family: inherit;
	font-size: .82rem;
	font-weight: 500;
	color: var(--v2-text-muted);
	cursor: pointer;
	transition: all .2s var(--v2-ease);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
	line-height: 1.2;
}
.genv2-len-btn.active {
	background: var(--v2-bg-white);
	color: var(--v2-text);
	box-shadow: var(--v2-shadow-sm);
	font-weight: 600;
}
.genv2-len-title { display: block; }
.genv2-len-hint { display: none; }

/* =================== PHOTO (compact row) =================== */
.genv2-photo {
	position: relative;
	display: flex;
	align-items: center;
	gap: .6rem;
	padding: .55rem .65rem;
	border: 1px dashed var(--v2-border-strong);
	border-radius: 10px;
	background: var(--v2-bg-white);
	cursor: pointer;
	transition: border-color .2s, background .2s;
	min-height: 52px;
}
.genv2-photo:hover { border-color: var(--v2-primary); }
.genv2-photo.drag-over { border-color: var(--v2-primary); background: var(--v2-primary-light); }
/* While the file is being uploaded we paint a spinner over the zone — the
   preview thumbnail is already visible (FileReader fires before fetch
   resolves), so the spinner makes it obvious that the file isn't done yet. */
.genv2-photo.is-uploading { pointer-events: none; }
.genv2-photo.is-uploading::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 24px;
	height: 24px;
	margin: -12px 0 0 -12px;
	border-radius: 50%;
	border: 2.5px solid rgba(255, 255, 255, .55);
	border-top-color: var(--v2-primary);
	animation: genv2-photo-spin .9s linear infinite;
	z-index: 2;
}
.genv2-photo.is-uploading::before {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, .55);
	border-radius: inherit;
	z-index: 1;
}
@keyframes genv2-photo-spin {
	to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
	.genv2-photo.is-uploading::after { animation-duration: 0s; }
}
.genv2-photo.upload-error { border-color: var(--v2-danger); }

.genv2-photo-input {
	position: absolute;
	inset: 0;
	opacity: 0;
	width: 100%;
	height: 100%;
	cursor: pointer;
}
.genv2-photo-idle {
	display: flex;
	align-items: center;
	gap: .55rem;
	color: var(--v2-text-muted);
	width: 100%;
}
.genv2-photo-idle svg {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
}
.genv2-photo-text {
	font-size: .82rem;
	font-weight: 500;
}
.genv2-photo-hint {
	font-size: .7rem;
	color: var(--v2-text-muted);
	margin-left: auto;
}
.genv2-photo-preview {
	display: none;
	align-items: center;
	gap: .55rem;
	width: 100%;
}
.genv2-photo-preview img {
	width: 42px;
	height: 42px;
	border-radius: 8px;
	object-fit: cover;
}
.genv2-photo-remove {
	margin-left: auto;
	border: 0;
	background: transparent;
	color: var(--v2-text-muted);
	cursor: pointer;
	font-size: 20px;
	line-height: 1;
	padding: 0 .4rem;
}
.genv2-photo.has-photo .genv2-photo-idle { display: none; }
.genv2-photo.has-photo .genv2-photo-preview { display: flex; }

/* =================== TOGGLE (is_public) =================== */
.genv2-toggle {
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .25rem 0 0;
	cursor: pointer;
	user-select: none;
	font-size: .82rem;
	color: var(--v2-text);
	margin-bottom: 1.15rem;
}
.genv2-toggle input { accent-color: var(--v2-primary); }
.genv2-toggle-label { font-weight: 500; color: var(--v2-text-muted); }

/* =================== SUBMIT =================== */
.genv2-submit {
	width: 100%;
	padding: .95rem;
	background: var(--v2-gradient);
	color: #fff;
	border: none;
	border-radius: 100px;
	cursor: pointer;
	font-size: .98rem;
	font-weight: 600;
	font-family: inherit;
	box-shadow: var(--v2-shadow-primary);
	transition: all .25s var(--v2-ease);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
}
.genv2-submit:hover:not(:disabled) {
	transform: translateY(-2px);
	box-shadow: var(--v2-shadow-primary-hover);
}
.genv2-submit:disabled { opacity: .6; cursor: not-allowed; }
.genv2-submit-busy { display: none; }
.genv2-submit.is-busy .genv2-submit-idle { display: none; }
.genv2-submit.is-busy .genv2-submit-busy { display: inline; }

.genv2-submit-note {
	margin-top: .85rem;
	font-size: .78rem;
	color: var(--v2-text-muted);
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .4rem;
}
.genv2-submit-note svg { flex-shrink: 0; }

/* =================== RESULT STATES =================== */
.genv2-state { display: none; flex: 1; }
.genv2-result[data-state="empty"]   .genv2-state-empty   { display: flex; }
.genv2-result[data-state="loading"] .genv2-state-loading { display: flex; }
.genv2-result[data-state="ready"]   .genv2-state-ready   { display: flex; flex-direction: column; }

/* --- EMPTY --- */
.genv2-state-empty {
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: var(--v2-text-muted);
	padding: 2rem 1rem;
}
.genv2-empty-icon {
	width: 72px; height: 72px;
	border-radius: 50%;
	background: var(--v2-primary-light);
	color: var(--v2-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1.25rem;
}
.genv2-empty-title {
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--v2-text);
	margin-bottom: .35rem;
	letter-spacing: -0.01em;
}
.genv2-empty-sub {
	font-size: .88rem;
	max-width: 280px;
	line-height: 1.55;
	text-wrap: pretty;
}
.genv2-hints {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	margin-top: .75rem;
}
.genv2-hint-chip {
	font-size: .78rem;
	padding: .35rem .8rem;
	border-radius: 100px;
	background: var(--v2-bg-white);
	border: 1px solid var(--v2-border);
	color: var(--v2-text-muted);
	cursor: pointer;
	transition: background .18s var(--v2-ease), color .18s var(--v2-ease), border-color .18s var(--v2-ease);
	font-family: inherit;
	white-space: nowrap;
}
.genv2-hint-chip:hover { border-color: var(--v2-primary); color: var(--v2-primary); }
.genv2-hint-chip.is-active {
	background: var(--v2-primary-light, rgba(96, 80, 176, 0.08));
	border-color: var(--v2-primary);
	color: var(--v2-primary);
	font-weight: 600;
}

/* --- LOADING --- */
.genv2-state-loading {
	flex-direction: column;
	justify-content: center;
}
.genv2-sk-line {
	height: 14px;
	border-radius: 4px;
	background: linear-gradient(90deg, rgba(0,0,0,0.04) 0%, rgba(96,80,176,0.10) 50%, rgba(0,0,0,0.04) 100%);
	background-size: 200% 100%;
	animation: genv2-shimmer 1.4s linear infinite;
	margin-bottom: 12px;
}
@keyframes genv2-shimmer {
	0%   { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}
.genv2-sk-status {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin-top: 1rem;
	font-size: .85rem;
	color: var(--v2-primary);
	font-weight: 500;
}
.genv2-sk-dot {
	width: 6px; height: 6px;
	background: var(--v2-primary);
	border-radius: 50%;
	animation: genv2-pulse 1.4s ease-in-out infinite;
}
.genv2-sk-dot:nth-child(2) { animation-delay: .2s; }
.genv2-sk-dot:nth-child(3) { animation-delay: .4s; }
@keyframes genv2-pulse {
	0%, 100% { opacity: .3; transform: scale(.9); }
	50%      { opacity: 1;  transform: scale(1.1); }
}

/* --- READY --- */
.genv2-state-ready { animation: genv2-fadeInUp .5s var(--v2-ease) both; }
@keyframes genv2-fadeInUp {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: translateY(0); }
}

.genv2-result-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1rem;
	flex-wrap: wrap;
	gap: .5rem;
}
.genv2-result-tags {
	display: flex;
	gap: .4rem;
	flex-wrap: wrap;
}
.genv2-tag {
	font-size: .72rem;
	font-weight: 600;
	color: var(--v2-primary);
	background: var(--v2-primary-light);
	padding: .25rem .65rem;
	border-radius: 100px;
}
.genv2-tag:empty { display: none; }
.genv2-result-counter {
	font-size: .75rem;
	color: var(--v2-text-muted);
	font-weight: 500;
}

.genv2-result-photo {
	margin-bottom: 1rem;
}
.genv2-result-photo img {
	width: 100%;
	max-height: 200px;
	object-fit: cover;
	border-radius: 10px;
}

.genv2-result-text {
	font-size: 1.05rem;
	font-style: normal;
	color: var(--v2-text);
	line-height: 1.75;
	white-space: pre-wrap;
	text-wrap: pretty;
	flex: 1;
	outline: none;
	border-radius: 10px;
	padding: .5rem;
	margin: -0.5rem;
	transition: background .2s, box-shadow .2s;
	min-height: 100px;
	/* Phase 6.10.2 G5 — make the inline-editable area discoverable. */
	cursor: text;
}
/* Hover hint so users notice the wish text is editable in place. */
.genv2-result-text:hover {
	background: rgba(96, 80, 176, 0.04);
	box-shadow: 0 0 0 1px rgba(96, 80, 176, 0.12);
}
.genv2-result-text:focus {
	background: rgba(96, 80, 176, 0.06);
	box-shadow: 0 0 0 1px rgba(96, 80, 176, 0.2);
}

.genv2-quick-edits {
	margin-top: 1.25rem;
	padding-top: 1.25rem;
	border-top: 1px dashed var(--v2-border);
}
.genv2-quick-edits-label {
	font-size: .72rem;
	text-transform: uppercase;
	letter-spacing: .5px;
	font-weight: 600;
	color: var(--v2-text-muted);
	margin-bottom: .6rem;
}
.genv2-quick-edits-row {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
}
.genv2-quick-edit {
	padding: .35rem .8rem;
	border: 1px solid var(--v2-border);
	border-radius: 100px;
	background: var(--v2-bg-white);
	color: var(--v2-text);
	font-size: .8rem;
	font-family: inherit;
	cursor: pointer;
	transition: all .2s;
	display: inline-flex;
	align-items: center;
	gap: .3rem;
}
.genv2-quick-edit:hover {
	border-color: var(--v2-primary);
	color: var(--v2-primary);
	background: var(--v2-primary-light);
}

.genv2-actions {
	display: flex;
	gap: .5rem;
	margin-top: 1.25rem;
	flex-wrap: wrap;
}
.genv2-btn {
	flex: 1;
	min-width: 110px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: .7rem 1.2rem;
	font-weight: 600;
	border-radius: 100px;
	cursor: pointer;
	border: none;
	transition: all .25s var(--v2-ease);
	font-size: .88rem;
	font-family: inherit;
	gap: .4rem;
	white-space: nowrap;
}
.genv2-btn-outline {
	border: 1px solid var(--v2-border);
	background: transparent;
	color: var(--v2-text);
}
.genv2-btn-outline:hover {
	border-color: var(--v2-primary);
	color: var(--v2-primary);
}
.genv2-btn-primary {
	background: var(--v2-gradient);
	color: #fff;
	box-shadow: var(--v2-shadow-primary);
}
.genv2-btn-primary:hover {
	transform: translateY(-2px);
	box-shadow: var(--v2-shadow-primary-hover);
}

/* =================== SHARE (small circular buttons) =================== */
.genv2-share {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin-top: 1rem;
	flex-wrap: wrap;
}
.genv2-share-label {
	font-size: .75rem;
	color: var(--v2-text-muted);
	font-weight: 500;
}
.genv2-share-buttons {
	display: flex;
	gap: .35rem;
	flex-wrap: wrap;
}
.genv2-share-btn {
	width: 32px; height: 32px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--v2-bg-white);
	border: 1px solid var(--v2-border);
	color: var(--v2-text-muted);
	transition: all .2s;
	cursor: pointer;
	padding: 0;
}
.genv2-share-btn:hover {
	border-color: var(--v2-primary);
	color: var(--v2-primary);
}

.genv2-manage {
	margin-top: 1rem;
	text-align: center;
}
.genv2-manage-link {
	font-size: .82rem;
	color: var(--v2-primary);
	font-weight: 600;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	text-decoration: none;
}
.genv2-manage-link:hover { text-decoration: underline; }

/* =================== HISTORY =================== */
.genv2-history {
	margin-top: 1.75rem;
	padding: 1.5rem;
	background: var(--v2-bg-white);
	border: 1px solid var(--v2-border);
	border-radius: 16px;
}
.genv2-history[hidden] { display: none; }
.genv2-history-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: .9rem;
}
.genv2-history-head h4 {
	font-size: .95rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	margin: 0;
	display: flex;
	align-items: center;
	gap: .5rem;
}
.genv2-history-count {
	font-size: .75rem;
	color: var(--v2-text-muted);
	font-weight: 500;
}
.genv2-history-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: .75rem;
}
.genv2-history-item {
	position: relative;
	padding: .85rem 1rem;
	border: 1px solid var(--v2-border);
	border-radius: 12px;
	background: var(--v2-bg);
	cursor: pointer;
	transition: all .2s var(--v2-ease);
}
.genv2-history-item:hover {
	border-color: var(--v2-primary);
	transform: translateY(-2px);
	box-shadow: var(--v2-shadow-sm);
}
.genv2-history-tag {
	font-size: .68rem;
	font-weight: 700;
	color: var(--v2-primary);
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-bottom: .35rem;
}
.genv2-history-preview {
	font-size: .83rem;
	color: var(--v2-text);
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-style: italic;
}
.genv2-history-del {
	position: absolute;
	top: 4px; right: 4px;
	width: 22px; height: 22px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--v2-text-muted);
	cursor: pointer;
	font-size: 14px;
	line-height: 1;
	opacity: 0;
	transition: opacity .15s;
}
.genv2-history-item:hover .genv2-history-del { opacity: 1; }
.genv2-history-del:hover { background: var(--v2-danger); color: #fff; }
.genv2-history-note {
	margin: .9rem 0 0;
	font-size: .78rem;
	color: var(--v2-text-muted);
}

/* =================== TOAST =================== */
.genv2-toast {
	position: fixed;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%) translateY(20px);
	background: var(--v2-text);
	color: #fff;
	padding: .75rem 1.25rem;
	border-radius: 100px;
	font-size: .88rem;
	font-weight: 500;
	box-shadow: var(--v2-shadow-lg);
	opacity: 0;
	pointer-events: none;
	transition: all .3s var(--v2-ease);
	z-index: 100;
}
.genv2-toast.visible {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

/* =================== RESPONSIVE =================== */
@media (max-width: 980px) {
	.genv2-grid { grid-template-columns: 1fr; }
	.genv2-result {
		border-left: none;
		border-top: 1px solid var(--v2-border);
		min-height: 420px;
	}
	.genv2-hero { padding: 1.5rem 0 1.5rem; }

	.genv2-tabs {
		display: flex;
		background: var(--v2-bg);
		border-bottom: 1px solid var(--v2-border);
		padding: 0 1.25rem;
		gap: .25rem;
		border-radius: 24px 24px 0 0;
	}
	.genv2-tab {
		padding: .85rem 1rem;
		background: transparent;
		border: none;
		font-family: inherit;
		font-size: .88rem;
		font-weight: 600;
		color: var(--v2-text-muted);
		cursor: pointer;
		border-bottom: 2px solid transparent;
		transition: all .2s;
	}
	.genv2-tab.active {
		color: var(--v2-primary);
		border-bottom-color: var(--v2-primary);
	}
	.genv2-grid.tab-form   .genv2-result { display: none; }
	.genv2-grid.tab-result .genv2-form   { display: none; }
	.genv2-grid.tab-result .genv2-result { border-top: none; }
}

@media (max-width: 560px) {
	.genv2-form, .genv2-result { padding: 1.5rem !important; }
	.genv2-hero { padding: 1rem 0 1.25rem; }
}


/* =====================================================================
   Ambient background — two slow-drifting gradient blobs behind the card.
   Pure CSS, GPU-composited, no JS; respects prefers-reduced-motion.
   ===================================================================== */
.genv2-section { position: relative; overflow: hidden; }
.genv2-section::before,
.genv2-section::after {
	content: '';
	position: absolute;
	top: 10%;
	left: -15%;
	width: 46vw;
	height: 46vw;
	max-width: 700px;
	max-height: 700px;
	border-radius: 50%;
	filter: blur(90px);
	opacity: 0.55;
	pointer-events: none;
	z-index: 0;
	background: radial-gradient(circle at 30% 30%, #c4b8ff 0%, rgba(196, 184, 255, 0) 70%);
	animation: genv2-blob-a 22s ease-in-out infinite alternate;
	will-change: transform;
}
.genv2-section::after {
	top: auto;
	bottom: 5%;
	left: auto;
	right: -10%;
	width: 40vw;
	height: 40vw;
	max-width: 620px;
	max-height: 620px;
	background: radial-gradient(circle at 70% 60%, #ffd7c7 0%, rgba(255, 215, 199, 0) 70%);
	animation: genv2-blob-b 28s ease-in-out infinite alternate;
	opacity: 0.5;
}
.genv2-section > .container { position: relative; z-index: 1; }

@keyframes genv2-blob-a {
	0%   { transform: translate3d(0, 0, 0)    scale(1); }
	50%  { transform: translate3d(6vw, 4vh, 0) scale(1.07); }
	100% { transform: translate3d(-2vw, 8vh, 0) scale(0.96); }
}
@keyframes genv2-blob-b {
	0%   { transform: translate3d(0, 0, 0)     scale(1); }
	50%  { transform: translate3d(-5vw, -6vh, 0) scale(1.05); }
	100% { transform: translate3d(3vw, -3vh, 0)  scale(0.94); }
}

/* Softer glow around the submit button */
.genv2-submit {
	position: relative;
	z-index: 1;
	transition: transform .18s var(--v2-ease), box-shadow .25s var(--v2-ease);
}
.genv2-submit::before {
	content: '';
	position: absolute;
	inset: -2px;
	border-radius: inherit;
	background: var(--v2-gradient);
	filter: blur(18px);
	opacity: 0.5;
	z-index: -1;
	transition: opacity .25s var(--v2-ease);
}
.genv2-submit:hover::before { opacity: 0.75; }
.genv2-submit:hover        { transform: translateY(-1px); }
.genv2-submit:active       { transform: translateY(0); }

/* Pill micro-interactions — layered on top of GSAP hover */
.genv2-pill {
	transition: transform .18s var(--v2-ease),
				background-color .2s var(--v2-ease),
				color .2s var(--v2-ease),
				border-color .2s var(--v2-ease),
				box-shadow .2s var(--v2-ease);
}
.genv2-pill.active {
	box-shadow: 0 6px 16px -4px rgba(96, 80, 176, 0.35);
}

/* Live-tag row — always visible above the state stack */
.genv2-result-meta--live {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
	margin: 0 0 1.25rem;
	padding: 0.55rem 0.75rem;
	border: 1px dashed var(--v2-border-strong);
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.55);
	backdrop-filter: blur(6px);
}
.genv2-result-meta--live .genv2-result-tags { gap: 0.4rem; flex-wrap: wrap; }
.genv2-result-meta--live .genv2-tag {
	padding: 0.28rem 0.7rem;
	font-size: 0.76rem;
	background: rgba(196, 184, 255, 0.18);
	color: var(--v2-primary);
	border-radius: 9999px;
	font-weight: 600;
	line-height: 1.3;
	animation: genv2-tag-in 0.28s var(--v2-ease);
}
.genv2-tag-length {
	background: rgba(122, 87, 68, 0.12);
	color: var(--v2-accent-brown);
}
.genv2-tag-lang {
	background: rgba(16, 185, 129, 0.12);
	color: #047857;
}
@keyframes genv2-tag-in {
	from { opacity: 0; transform: translateY(-4px) scale(0.96); }
	to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* Messenger share button — Facebook-blue brand tint on hover */
.genv2-share-btn--messenger:hover { color: #0084ff; }
.genv2-share-btn--viber:hover     { color: #7360f2; }

/* Respect reduced motion preference — kill all ambient animation */
@media (prefers-reduced-motion: reduce) {
	.genv2-section::before,
	.genv2-section::after { animation: none; }
	.genv2-tag { animation: none; }
}

/* =====================================================================
   Stepped variant — progress bar, step transitions.
   ===================================================================== */
.genv2-stepped .genv2-steps-bar {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 1.25rem 1.5rem 0.5rem;
	border-bottom: 1px solid var(--v2-border);
	background: #fff;
	border-radius: 24px 24px 0 0;
}
.genv2-steps-item {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 0.65rem;
	padding: 0.7rem 0.85rem;
	/* WCAG 2.5.8 AA — tap targets ≥ 24×24. The flex:1 width almost
	   always exceeds that, but pin a hard floor in case a long
	   localised label wraps the row narrower. */
	min-height: 44px;
	min-width: 44px;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 12px;
	font-family: inherit;
	color: var(--v2-text-muted);
	text-align: left;
	cursor: pointer;
	transition: background-color .2s var(--v2-ease), color .2s var(--v2-ease), border-color .2s var(--v2-ease);
}
.genv2-steps-item:hover { background: var(--v2-bg); }
.genv2-steps-item.active {
	background: var(--v2-primary-light);
	color: var(--v2-primary);
	border-color: rgba(96, 80, 176, 0.25);
}
.genv2-steps-item.complete { color: var(--v2-primary); }
.genv2-steps-item.complete .genv2-steps-num {
	background: var(--v2-primary);
	color: #fff;
	border-color: var(--v2-primary);
}
.genv2-steps-num {
	width: 28px; height: 28px;
	flex: 0 0 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--v2-border-strong);
	border-radius: 50%;
	font-weight: 700;
	font-size: 0.85rem;
	background: #fff;
	color: inherit;
	transition: background-color .2s var(--v2-ease), color .2s var(--v2-ease), border-color .2s var(--v2-ease);
}
.genv2-steps-item.active .genv2-steps-num {
	background: var(--v2-primary);
	color: #fff;
	border-color: var(--v2-primary);
}
.genv2-steps-text {
	display: flex;
	flex-direction: column;
	line-height: 1.2;
	min-width: 0;
}
.genv2-steps-text strong {
	font-weight: 700;
	font-size: 0.92rem;
	white-space: normal;
	word-break: break-word;
	line-height: 1.25;
}
.genv2-steps-text small {
	font-size: 0.74rem;
	color: var(--v2-text-muted);
	margin-top: 2px;
	white-space: normal;
	word-break: break-word;
	line-height: 1.3;
}

/* Locked Step 4 pill — visible but not clickable until /generate succeeded.
   Click is blocked by showStep() guard in generator-v2-steps.js, so hover
   still reaches the pill and we can show a tooltip explaining the lock.
   Opacity is applied to child nodes (not the pill itself), so the tooltip
   pseudo-elements stay fully opaque. */
.genv2-steps-item.is-disabled {
	cursor: not-allowed;
}
.genv2-steps-item.is-disabled .genv2-steps-num,
.genv2-steps-item.is-disabled .genv2-steps-text {
	opacity: 0.45;
}
.genv2-steps-item[data-locked-hint] { position: relative; }
/* Tooltip is positioned BELOW the pill so it stays inside .genv2-wrap
   (which has overflow:hidden for its rounded corners). */
.genv2-steps-item.is-disabled[data-locked-hint]:hover::after,
.genv2-steps-item.is-disabled[data-locked-hint]:focus-visible::after {
	content: attr(data-locked-hint);
	position: absolute;
	top: calc(100% + 10px);
	left: 50%;
	transform: translateX(-50%);
	background: var(--v2-text);
	color: #fff;
	padding: 0.5rem 0.75rem;
	border-radius: 8px;
	font-size: 0.78rem;
	font-weight: 500;
	line-height: 1.3;
	white-space: nowrap;
	box-shadow: var(--v2-shadow-md);
	pointer-events: none;
	z-index: 20;
}
.genv2-steps-item.is-disabled[data-locked-hint]:hover::before,
.genv2-steps-item.is-disabled[data-locked-hint]:focus-visible::before {
	content: '';
	position: absolute;
	top: calc(100% + 4px);
	left: 50%;
	transform: translateX(-50%);
	border: 6px solid transparent;
	border-bottom-color: var(--v2-text);
	pointer-events: none;
	z-index: 20;
}
.genv2-steps-sep {
	flex: 0 0 18px;
	height: 2px;
	background: var(--v2-border-strong);
	border-radius: 2px;
	margin: auto;
}

/* Step panels inside the stepped form — pure cross-fade, no horizontal motion. */
.genv2-form--stepped { position: relative; min-height: 520px; }
.genv2-step[data-step] {
	opacity: 1;
	transition: opacity 0.18s var(--v2-ease);
}
.genv2-step[data-step].is-leaving  { opacity: 0; pointer-events: none; }
.genv2-step[data-step].is-entering { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
	.genv2-step[data-step] { transition: none; }
}
.genv2-step-nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 1.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--v2-border);
	gap: 0.75rem;
}
.genv2-step-nav .genv2-btn,
.genv2-step-nav .genv2-submit {
	min-width: 140px;
}

/* Free-tier quota — bottom-right footer inside .genv2-result. Visible from
   page load for guests, auto-hidden for logged-in users (is_unlimited).
   Muted and small so it reads as helper text, not a scary counter. When the
   quota runs out, `.is-depleted` flips the accent and promotes the register
   CTA from hidden to visible. */
.genv2-quota {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.5rem;
	padding: 0.75rem 0 0;
	margin-top: 0.75rem;
	border-top: 1px solid var(--v2-border);
	font-size: 0.82rem;
	color: var(--v2-muted, #6b7280);
	text-align: right;
}
.genv2-quota[hidden] { display: none; }
.genv2-quota-text { line-height: 1.4; }
.genv2-quota-cta {
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	color: var(--v2-primary);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.genv2-quota-cta:hover,
.genv2-quota-cta:focus-visible { color: var(--v2-primary-dark, var(--v2-primary)); }
.genv2-quota.is-depleted {
	color: #b45309; /* amber-700 — depleted state reads as warning, not error */
	font-weight: 600;
}
[dir="rtl"] .genv2-quota { text-align: left; justify-content: flex-start; }

/* Mobile-only anchor that lifts the user from the result section back up
   to step 4 (delivery). On desktop the form and result sit side-by-side,
   so the anchor would be redundant. */
.genv2-step4-anchor-wrap { display: none; }
@media (max-width: 980px) {
	.genv2-step4-anchor-wrap { display: block; }
	.genv2-step4-anchor-wrap[hidden] { display: none; }
}

/* Breathing room when the anchor click lands on step 4 — keeps the
   step heading from pinning to the very top of the viewport. */
#genv2-step-delivery { scroll-margin-top: 12px; }

@media (max-width: 760px) {
	.genv2-quota {
		justify-content: center;
		text-align: center;
		flex-wrap: wrap;
	}
	.genv2-stepped .genv2-steps-bar {
		flex-wrap: wrap;
		gap: 0.35rem;
		padding: 1rem;
	}
	.genv2-steps-sep { display: none; }
	.genv2-steps-text small { display: none; }
	.genv2-steps-text strong { font-size: 0.82rem; }
	/* Two-up grid: each item takes 50% of the row minus half the gap.
	   On tighter mobile widths the four steps render in two clean rows
	   instead of wrapping by content width. */
	.genv2-steps-item {
		flex: 0 0 calc(50% - 0.175rem);
		max-width: calc(50% - 0.175rem);
		padding: 0.5rem 0.45rem;
		gap: 0.45rem;
		min-width: 0;
	}
	.genv2-steps-item .genv2-steps-text { min-width: 0; }
	.genv2-steps-item .genv2-steps-text strong {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* Quick starters — chips waste vertical space on narrow screens; the
	   text input above is enough. Hide the whole field, label included. */
	.genv2-stepped .genv2-field--hints { display: none; }

	/* Step nav — Back + Next/Generate don't fit side-by-side once "Generate
	   wish" wraps to two lines. Stack vertically with primary button on top. */
	.genv2-stepped .genv2-step-nav {
		flex-direction: column-reverse;
		align-items: stretch;
		gap: 0.6rem;
	}
	.genv2-stepped .genv2-step-nav .genv2-btn,
	.genv2-stepped .genv2-step-nav .genv2-submit {
		width: 100%;
		min-width: 0;
	}
	.genv2-stepped .genv2-step-nav > span:empty { display: none; }

	/* Photo zone — wrap text + format-hint into a clean two-line stack
	   instead of letting "JPG · PNG · WebP" break onto its own awkward
	   second line beside a wrapped main label. */
	.genv2-photo-idle {
		flex-wrap: wrap;
		gap: 0.15rem 0.6rem;
	}
	.genv2-photo-idle svg {
		width: 22px;
		height: 22px;
	}
	.genv2-photo-text {
		flex: 1 1 auto;
		min-width: 0;
		font-size: 0.85rem;
		line-height: 1.3;
	}
	.genv2-photo-hint {
		flex: 0 0 100%;
		margin-left: 0;
		padding-left: calc(22px + 0.55rem);
		font-size: 0.7rem;
		letter-spacing: 0.02em;
	}
}

/* Mobile: live-preview panel sits BELOW the steps so the user finishes
   the form first, then sees the generated result underneath. The grid
   drops to a single column at this breakpoint, so DOM order (form →
   result) wins naturally — no `order` swap needed. */
@media (max-width: 980px) {
	.genv2-grid--stepped .genv2-result {
		min-height: auto;
		border-left: none;
		border-top: 1px solid var(--v2-border);
	}
}

/* Tight side breathing room on real phones. Drops both the page-level
   container and the generator's inner panels from ~16–24px to 10px so
   the form on a 375px viewport stops feeling boxed in. Placed AFTER
   the wider 760px block so its narrower-viewport rules win the cascade
   on identical selectors. */
@media (max-width: 480px) {
	.container { padding: 0 0.625rem; }
	.genv2-section .container { padding: 0 0.625rem; }
	.genv2-form, .genv2-result { padding: 0.625rem !important; }
	.genv2-stepped .genv2-steps-bar { padding: 0.625rem; }
	.genv2-step[data-step] { padding: 0; }
}

/* =====================================================================
   Empty-state heart icon — gentle, continuous pulsation so the panel
   feels alive while the user fills out the form.
   ===================================================================== */
.genv2-empty-icon {
	animation: genv2-heart-pulse 1.6s ease-in-out infinite;
	transform-origin: center;
	will-change: transform, box-shadow;
}
.genv2-empty-icon svg { transition: transform .25s var(--v2-ease); }
@keyframes genv2-heart-pulse {
	0%, 100% {
		transform: scale(1);
		box-shadow: 0 0 0 0 rgba(96, 80, 176, 0.0);
	}
	30% {
		transform: scale(1.08);
		box-shadow: 0 0 0 12px rgba(96, 80, 176, 0.10);
	}
	45% { transform: scale(0.97); }
	60% {
		transform: scale(1.05);
		box-shadow: 0 0 0 18px rgba(96, 80, 176, 0.0);
	}
	100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
	.genv2-empty-icon { animation: none; }
}

/* =====================================================================
   Custom occasion — "+" pill + smoothly revealed input.
   ===================================================================== */
.genv2-pill--custom {
	border-style: dashed;
	color: var(--v2-primary);
	font-weight: 600;
}
.genv2-pill--custom .genv2-pill-emoji {
	font-size: 1.05em;
	font-weight: 700;
	line-height: 1;
	opacity: 1;
}
.genv2-pill--custom:hover {
	background: var(--v2-primary-light);
	border-color: var(--v2-primary);
}
.genv2-pill--custom.active {
	background: var(--v2-primary);
	color: #fff;
	border-style: solid;
}

/* Phase 6.9 H5 — wrap custom-occasion input + emoji picker in a single
   flex row. Margin-top moves UP to the row; the inner .genv2-custom-occasion
   keeps display:grid for its slide-down animation. The emoji picker takes
   its intrinsic width on the right; input takes the rest. */
.genv2-occasion-custom-row {
	margin-top: 0.7rem;
	display: flex;
	gap: 0.5rem;
	align-items: stretch;
	transition: opacity 0.25s var(--v2-ease);
}
.genv2-occasion-custom-row[hidden] {
	display: none;
}
.genv2-custom-occasion {
	flex: 1 1 auto;
	margin-top: 0;
	display: grid;
	grid-template-rows: 1fr;
	overflow: hidden;
	transition: grid-template-rows 0.3s var(--v2-ease), opacity 0.25s var(--v2-ease);
}
.genv2-custom-occasion > * {
	min-height: 0;
}
.genv2-occasion-custom-input {
	width: 100%;
	padding: 0.7rem 0.95rem;
	border: 1px solid var(--v2-border-strong);
	border-radius: 12px;
	background: linear-gradient(180deg, rgba(196, 184, 255, 0.06), rgba(255, 255, 255, 0.85));
	font-family: inherit;
	font-size: 0.92rem;
	color: var(--v2-text);
	transition: border-color .2s, box-shadow .2s, background .2s;
}
.genv2-occasion-custom-input:focus {
	outline: none;
	border-color: var(--v2-primary);
	box-shadow: 0 0 0 4px rgba(96, 80, 176, 0.12);
	background: var(--v2-bg-white);
}

/* Visually hidden but accessible label */
.genv2-sr-only {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* =====================================================================
   Photo zone — once a photo is attached, disable interactions on the
   transparent file input so a stray click can't reopen the picker
   (the visible "×" button is the only way to remove the photo).
   ===================================================================== */
.genv2-photo.has-photo { cursor: default; }
.genv2-photo.has-photo .genv2-photo-input {
	display: none;
	pointer-events: none;
}

/* =====================================================================
   Guest gate — drag-drop requires a registered account.
   The input is disabled server-side; we still neutralize its pointer
   events so a stray focus/tap can never open the native picker, and
   surface a hover/focus tooltip explaining why the zone is gated.
   ===================================================================== */
.genv2-photo--guest {
	cursor: pointer;
	background: color-mix(in srgb, var(--v2-bg-white) 94%, var(--v2-primary) 6%);
	border-style: dashed;
	border-color: color-mix(in srgb, var(--v2-border-strong) 70%, var(--v2-primary) 30%);
}
.genv2-photo--guest:hover,
.genv2-photo--guest:focus-visible {
	border-color: var(--v2-primary);
	background: var(--v2-primary-light, rgba(96, 80, 176, 0.08));
}
.genv2-photo--guest .genv2-photo-input {
	pointer-events: none;
}

/* Legacy black ::after / ::before tooltip on .genv2-photo--guest replaced
   by the unified .genv2-locked pattern below. The PHP no longer emits
   data-auth-tooltip / title on the photo zone, so nothing renders here. */

/* =====================================================================
   .genv2-locked — unified premium-locked treatment.
   Used by:
     - Photo upload (Step 3) for guests
     - Occasion "My own" pill (Step 1) for guests
     - Tone "Poetic" pill (Step 1) for guests
     - Language Select2 → "Add your own language" option (custom row)
     - Step 4 "Delivery" header for guests
   A small gold/orange star sits in the top-right; on hover/focus a soft
   purple tooltip fades in. Click is delegated to generator-v2.js which
   opens the register modal with a contextual reason.
   ===================================================================== */
.genv2-locked {
	position: relative;
	cursor: pointer;
}
.genv2-locked .genv2-locked-star {
	position: absolute;
	top: -8px;
	right: -8px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: linear-gradient(135deg, #ffd45c 0%, #ff9b3d 100%);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 12px rgba(255, 155, 61, 0.45), 0 0 0 2px var(--v2-bg-white, #fff);
	pointer-events: none;
	z-index: 2;
}
.genv2-locked .genv2-locked-star svg {
	width: 12px;
	height: 12px;
	stroke: #fff;
	fill: #fff;
}
.genv2-locked .genv2-locked-tooltip {
	position: absolute;
	left: 50%;
	bottom: calc(100% + 12px);
	transform: translate(-50%, 4px);
	background: linear-gradient(135deg, #313330 0%, #4a3d77 100%);
	color: #fff;
	font-family: inherit;
	font-size: 0.78rem;
	font-weight: 500;
	font-style: normal;
	line-height: 1.35;
	letter-spacing: 0;
	padding: 0.55rem 0.85rem;
	border-radius: 10px;
	white-space: nowrap;
	max-width: 90vw;
	box-shadow: 0 12px 28px rgba(49, 51, 48, 0.22);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.18s ease, transform 0.18s ease;
	z-index: 30;
}
.genv2-locked .genv2-locked-tooltip::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -4px;
	width: 10px;
	height: 10px;
	background: #4a3d77;
	transform: translateX(-50%) rotate(45deg);
	z-index: -1;
}
.genv2-locked:hover > .genv2-locked-tooltip,
.genv2-locked:focus-visible > .genv2-locked-tooltip,
.genv2-locked:focus-within > .genv2-locked-tooltip {
	opacity: 1;
	transform: translate(-50%, 0);
}
@media (max-width: 640px) {
	.genv2-locked .genv2-locked-tooltip {
		white-space: normal;
		min-width: 220px;
		text-align: center;
	}
}

/* Pills (Occasion / Tone) get a slightly different star offset so it
   doesn't overlap rounded chip corners awkwardly. */
.genv2-pill.genv2-locked .genv2-locked-star {
	top: -6px;
	right: -6px;
	width: 18px;
	height: 18px;
}
.genv2-pill.genv2-locked .genv2-locked-star svg {
	width: 10px;
	height: 10px;
}

/* Step 4 header / Delivery panel — locked treatment is on the panel
   header, not on the whole step, so position the star against the
   header text rather than the step container. */
.genv2-step--delivery .genv2-panel-h.genv2-locked {
	cursor: pointer;
}
.genv2-step--delivery .genv2-panel-h.genv2-locked .genv2-locked-star {
	top: -4px;
	right: auto;
	left: calc(100% + 6px);
}

/* Language Select2 — "Add your own language" custom row. Rendered by
   generator-v2.js templateResult into the Select2 dropdown.
   Doesn't need the absolute star — the row is its own self-contained
   list item, so the star sits inline next to the label. */
.genv2-add-own-lang {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.1rem 0;
	color: var(--v2-primary, #6050b0);
	font-weight: 600;
	cursor: pointer;
}
.genv2-add-own-lang-star {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: linear-gradient(135deg, #ffd45c 0%, #ff9b3d 100%);
	color: #fff;
	flex-shrink: 0;
	box-shadow: 0 2px 6px rgba(255, 155, 61, 0.45);
}
.genv2-add-own-lang-star svg {
	width: 10px;
	height: 10px;
	stroke: #fff;
	fill: #fff;
}
.genv2-select2-dropdown .select2-results__option--highlighted .genv2-add-own-lang {
	color: #fff;
}
.genv2-select2-dropdown .select2-results__option--highlighted .genv2-add-own-lang-star {
	box-shadow: 0 2px 6px rgba(255, 155, 61, 0.6);
}

/* =====================================================================
   Select2 — language picker with flag + search.
   Loaded only on the preview pages; matches the rest of the form.
   ===================================================================== */
.genv2-section .select2-container--default .select2-selection--single {
	height: auto;
	min-height: 44px;
	padding: 0.45rem 0.6rem;
	border: 1px solid var(--v2-border);
	border-radius: 10px;
	background: var(--v2-bg-white);
	transition: border-color .2s, box-shadow .2s;
}
.genv2-section .select2-container--default.select2-container--focus .select2-selection--single,
.genv2-section .select2-container--default.select2-container--open  .select2-selection--single {
	border-color: var(--v2-primary);
	box-shadow: 0 0 0 3px rgba(96, 80, 176, 0.12);
	outline: none;
}
.genv2-section .select2-container--default .select2-selection--single .select2-selection__rendered {
	color: var(--v2-text);
	line-height: 1.4;
	padding-left: 0;
	padding-right: 1.5rem;
	font-size: 0.95rem;
}
.genv2-section .select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 100%;
	right: 0.6rem;
}
.genv2-section .select2-container--default .select2-selection--single .select2-selection__arrow b {
	border-color: var(--v2-text-muted) transparent transparent transparent;
}
.genv2-section .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
	border-color: transparent transparent var(--v2-text-muted) transparent;
}

.genv2-lang-row {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	min-width: 0;
}
/* Flag rendered via flag-icons (.fi.fi-{iso}) — real SVG, consistent on every
   platform. The .fi base class sets width/height as ems, so the flag scales
   with surrounding font-size. The hairline ring softens contrast against
   white-on-white flags (Japan, Switzerland, etc.) without being visible on
   colored ones. */
.genv2-lang-flag {
	flex-shrink: 0;
	display: inline-block;
	width: 1.5em;
	height: 1.125em;
	line-height: 1;
	border-radius: 2px;
	background-size: cover;
	background-position: center;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
	font-size: 1em;
	text-align: center;
}
/* When flag-icons CSS isn't loaded yet (or iso missing) we fall back to the
   emoji from data-flag — keep text vertically centered in the ghost box. */
.genv2-lang-flag:not(.fi) {
	box-shadow: none;
	background: none;
	width: auto;
	min-width: 1.5em;
	font-size: 1.1em;
}
.genv2-lang-name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Dropdown — appended to <body>, OUTSIDE .genv2-section, so CSS variables
   defined on the section don't apply here. Use literal colors and a high
   z-index so the panel sits cleanly above adjacent form rows / buttons.

   Shadow note: the previous 0/12/36 shadow blurred ~18px in every direction,
   so it bled UP over the closed select pill (it looked like the dropdown
   was "наползает" on the input). Tightened blur + directional offsets
   (positive y for --below, negative y for --above) keep the pill clean. */
/* ============================================================
   ⚠️ DO NOT CHANGE — Select2 dropdown positioning.
   These margin-top values and the directional border-radius are
   load-bearing: Select2 positions the dropdown right against the
   pill. Any non-zero margin-top here makes "below" overlap the
   field on the way down, or "above" overlap on the way up. The
   missing-radius edge is the one that touches the pill, so the
   panel reads as a continuation of the input.
   If this looks "off", read this comment again before editing.
   ============================================================ */
.genv2-select2-dropdown.select2-dropdown {
	border: 1px solid rgba(178, 178, 174, 0.45);
	border-radius: 12px;
	overflow: hidden;
	background: #ffffff;
	z-index: 10000;
}
.genv2-select2-dropdown.select2-dropdown--below {
	margin-top: 0px;                          /* ⚠️ DO NOT CHANGE */
	border-top-left-radius: 0;                /* ⚠️ DO NOT CHANGE */
	border-top-right-radius: 0;               /* ⚠️ DO NOT CHANGE */
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.genv2-select2-dropdown.select2-dropdown--above {
	margin-top: 0px;                          /* ⚠️ DO NOT CHANGE */
	border-bottom-left-radius: 0;             /* ⚠️ DO NOT CHANGE */
	border-bottom-right-radius: 0;            /* ⚠️ DO NOT CHANGE */
	box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.12);
}
.genv2-select2-dropdown .select2-search--dropdown {
	padding: 0.6rem;
	background: #faf9ff;
}
.genv2-select2-dropdown .select2-search--dropdown .select2-search__field {
	border: 1px solid rgba(178, 178, 174, 0.45);
	border-radius: 8px;
	padding: 0.5rem 0.7rem;
	font-family: inherit;
	font-size: 0.9rem;
	color: #313330;
	background: #ffffff;
	transition: border-color .2s, box-shadow .2s;
}
.genv2-select2-dropdown .select2-search--dropdown .select2-search__field:focus {
	outline: none;
	border-color: #6050b0;
	box-shadow: 0 0 0 3px rgba(96, 80, 176, 0.12);
}
.genv2-select2-dropdown .select2-results__options {
	max-height: 280px;
	padding: 0.25rem;
	background: #ffffff;
}
.genv2-select2-dropdown .select2-results__option {
	padding: 0.55rem 0.7rem;
	border-radius: 8px;
	font-size: 0.92rem;
	color: #313330;
	background: #ffffff;
	transition: background .15s, color .15s;
}
.genv2-select2-dropdown .select2-results__option--highlighted[aria-selected],
.genv2-select2-dropdown .select2-results__option:hover {
	background: rgba(196, 184, 255, 0.30);
	color: #6050b0;
}
.genv2-select2-dropdown .select2-results__option[aria-selected=true] {
	background: #6050b0;
	color: #ffffff;
}
.genv2-select2-dropdown .select2-results__option[aria-selected=true] .genv2-lang-flag {
	filter: none;
}
/* Select2 ships its own .select2-container z-index (1051); bump the wrapper
   so it never gets covered by photo zone, share row, or sticky CTA buttons. */
.select2-container.select2-container--open { z-index: 10000; }

/* =====================================================================
   Share buttons — use the global .share-btn / .share-btn--<network>
   styling from main.css. Centered, no label, tighter for v2 result panel.
   ===================================================================== */
.genv2-share {
	margin-top: 1.25rem;
	display: flex;
	justify-content: center;
}
.genv2-share .result-share-buttons {
	display: inline-flex;
	gap: 0.5rem;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
}
.genv2-share .share-btn {
	width: 38px;
	height: 38px;
}
.genv2-share .share-btn svg {
	width: 18px;
	height: 18px;
}

/* =====================================================================
   Footer buttons — match home-generator's .btns-footer pattern:
   stacked block of action row + manage-wishes link, full-width gradient.
   The base .btns-footer / .result-actions / .btn-full-width come from
   main.css; we only tighten margins for the v2 result card.
   ===================================================================== */
.genv2-btns-footer {
	margin-top: 1.5rem;
	gap: 0.75rem;
}
.genv2-btns-footer .result-actions {
	gap: 0.6rem;
}
.genv2-btns-footer .result-actions .btn {
	flex: 1;
	min-width: 0;
	font-size: 0.9rem;
	padding: 0.7rem 1rem;
}
.genv2-btns-footer .result-manage-wishes {
	margin-top: 0;
}
.genv2-btns-footer .btn-full-width {
	margin-top: 0;
	padding: 0.85rem;
	font-size: 0.95rem;
}

/* =====================================================================
   Toast (.wv2-toast) — same DOM/style as the cabinet/single-wish toast.
   Re-declared here because wishes-v2.css is not loaded on the homepage.
   Two flavours:
     • base — small dark pill for routine confirmations (regenerate,
       card-style saved, copy success).
     • --celebrate — the first /generate of the session: gradient pill,
       big occasion emoji on the left, springy pop-in.
   ================================================================== */
.wv2-toast {
	position: fixed;
	bottom: 24px;
	left: 50%;
	transform: translate(-50%, 40px);
	padding: 0.85rem 1.25rem;
	background: #313330;
	color: #fff;
	border-radius: 14px;
	font-size: 0.92rem;
	line-height: 1.3;
	opacity: 0;
	pointer-events: none;
	transition: opacity .25s, transform .35s cubic-bezier(.2,1.2,.4,1);
	/* Above modals (1300), drawers (1190), WP admin-bar (99999) so toasts
	   stay visible during overlays. */
	z-index: 1000000;
	box-shadow: 0 8px 40px rgba(0, 0, 0, 0.18);
	max-width: calc(100vw - 32px);
}
.wv2-toast.show {
	opacity: 1;
	transform: translate(-50%, 0);
	pointer-events: auto;
}
.wv2-toast--celebrate {
	background: linear-gradient(135deg, #6050b0 0%, #8e7fd6 100%);
	padding: 1rem 1.4rem 1rem 4.5rem;
	font-weight: 600;
	font-size: 1rem;
	box-shadow: 0 16px 32px -6px rgba(96, 80, 176, 0.45);
}
.wv2-toast--celebrate::before {
	content: attr(data-toast-emoji);
	position: absolute;
	left: 1.1rem;
	top: 50%;
	transform: translateY(-50%);
	font-size: 32px;
	line-height: 1;
}
.wv2-toast--celebrate.show {
	animation: wv2-celebrate-pop .6s cubic-bezier(.2, 1.4, .4, 1);
}
@keyframes wv2-celebrate-pop {
	0%   { transform: translate(-50%, 40px) scale(.7); opacity: 0; }
	60%  { transform: translate(-50%, -8px)  scale(1.06); opacity: 1; }
	100% { transform: translate(-50%, 0)     scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
	.wv2-toast { transition: opacity .15s; }
	.wv2-toast--celebrate.show { animation: none; }
}

/* =====================================================================
   CANVAS MODE — screen machine  (.genv2-canvas + [data-screen] on #genv2-root)
   ---------------------------------------------------------------------
   No step wizard. One screen with a compose → (writing) → result →
   delivery state machine driven by generator-screens.js. Left column
   swaps content per screen; the live preview card lives in the right
   column at all times. Every field/ID/data-name is reused unchanged.
   ===================================================================== */

/* overflow-x:hidden on <html>/<body> turns the root into a scroll
   container and breaks position:sticky for the preview. `overflow:clip`
   clips identically WITHOUT a scroll container. Scoped via :has(). */
html:has(.genv2-canvas),
body:has(.genv2-canvas) { overflow-x: clip; }

.genv2-canvas .genv2-steps-bar { display: none; }

/* sticky needs no overflow:hidden ancestor — open the section + card wrap. */
.genv2-canvas.genv2-section { overflow: visible; }
.genv2-canvas .genv2-wrap { overflow: visible; }

.genv2-canvas .genv2-grid--stepped {
	grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
	align-items: start;
	min-height: 0;
}

/* ── LEFT column: natural height — ONE page/stage scroll for everything,
   no per-column scrollbars anywhere. ─────────────────────────────────── */
.genv2-canvas .genv2-form--stepped {
	min-height: 0;
	border-radius: 24px 0 0 24px;
}
.genv2-canvas .genv2-step {
	display: flex;
	flex-direction: column;
	opacity: 1;
	transform: none;
	flex: 0 0 auto;
}
/* Compose reads as ONE continuous form (design parity) — NO horizontal
   divider lines between the former steps. The only rule line on the
   canvas is the "Look & format" divider before the secondary fields. */
.genv2-canvas[data-screen="compose"] .genv2-step:not(.genv2-step--delivery) + .genv2-step:not(.genv2-step--delivery),
.genv2-canvas[data-screen="loading"] .genv2-step:not(.genv2-step--delivery) + .genv2-step:not(.genv2-step--delivery) {
	margin-top: .35rem;
}

/* Kill all legacy step Next/Back; the screen machine supplies its own
   Generate / Continue / Back buttons. */
.genv2-canvas [data-step-next],
.genv2-canvas [data-step-prev] { display: none !important; }
.genv2-canvas .genv2-step-nav {
	margin-top: 1.25rem; padding-top: 0; border-top: none; justify-content: flex-start;
}
.genv2-canvas .genv2-submit { flex: 1 1 auto; width: 100%; }

/* The live-style row in the preview is replaced by the 4 chips below it. */
.genv2-canvas .genv2-live-styles { display: none; }

/* ── Screen visibility ──────────────────────────────────────────────── */
.genv2-canvas .genv2-screen--result { display: none; }
.genv2-canvas .genv2-step--delivery { display: none; }            /* hidden on compose/result */

.genv2-canvas[data-screen="result"]   .genv2-step:not(.genv2-step--delivery) { display: none; }
.genv2-canvas[data-screen="result"]   .genv2-screen--result { display: block; }

.genv2-canvas[data-screen="delivery"] .genv2-step:not(.genv2-step--delivery) { display: none; }
.genv2-canvas[data-screen="delivery"] .genv2-screen--result { display: none; }
.genv2-canvas[data-screen="delivery"] .genv2-step--delivery { display: flex; flex-direction: column; }

/* result-screen panel chrome */
.genv2-screen--result .genv2-screen-h { margin-bottom: 1.25rem; }
.genv2-screen--result .genv2-result-tools { display: block; }     /* always visible once on result */
.genv2-screen-nav { display: flex; flex-direction: column; gap: .5rem; margin-top: 1.25rem; }

/* Legacy result-tools CTAs superseded by the screen machine's own
   "Continue to delivery" / "Back to editing" buttons — kill the duplicates
   (they un-hide themselves via JS removing [hidden] after /generate). */
.genv2-canvas .genv2-step4-anchor-wrap,
.genv2-canvas .genv2-result-manage { display: none !important; }

/* Delivery submit (Send now / Schedule) — full-width primary, per design. */
.genv2-canvas .genv2-step-nav--final { display: flex; width: 100%; }
.genv2-canvas .genv2-step-nav--final .genv2-result-cta { flex: 1 1 auto; width: 100%; justify-content: center; }

/* ── RIGHT column: floating preview ─────────────────────────────────── */
/* NO inner scroll, NO height cap: the panel is exactly as tall as its
   content. There is ONE vertical scroll (the page / the modal stage); the
   panel floats with it — smart-float in generator-screens.js drives
   translateY (scroll down → pins by its bottom edge, scroll up → by its
   top; shorter-than-viewport → simple top pin). */
.genv2-canvas .genv2-result {
	position: relative;
	align-self: start;
	min-height: 0;
	border-radius: 0 24px 24px 0;
	will-change: transform;
}

/* ── Preview chips (type + value indicator) ─────────────────────────── */
.genv2-prev-chips {
	display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-top: 1.1rem;
}
.genv2-prev-chip {
	display: inline-flex; align-items: center; gap: .45rem;
	padding: .45rem .8rem; border-radius: 999px;
	border: 1.5px solid var(--v2-border); background: var(--v2-bg-white);
	color: var(--v2-text); font-size: .82rem; font-weight: 600; font-family: inherit;
	cursor: pointer; transition: border-color .15s, color .15s, transform .1s;
}
.genv2-prev-chip:hover { border-color: var(--v2-primary); color: var(--v2-primary); }
.genv2-prev-chip:active { transform: scale(.97); }
.genv2-prev-chip-ind { display: inline-flex; align-items: center; }
.genv2-prev-chip-sw { width: 14px; height: 14px; border-radius: 4px; background: var(--v2-primary); display: inline-block; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.genv2-prev-chip-flag { font-size: 1rem; line-height: 1; }
.genv2-prev-caption { text-align: center; font-size: .76rem; color: var(--v2-text-muted); margin-top: .65rem; }
.genv2-canvas[data-screen="result"] .genv2-prev-caption { display: none; }

/* Preview close (✕) exists ONLY inside the opened mobile preview overlay —
   everywhere else (desktop included: it used to render as a stray block
   strip under the chips) it must not display at all. */
.genv2-prev-close { display: none; }

/* tap-to-edit affordance on the card */
.genv2-tap { cursor: pointer; }
.genv2-jump-ring { box-shadow: 0 0 0 3px rgba(96, 80, 176, 0.35) !important; border-radius: 14px; transition: box-shadow .24s; }

/* ── Preview action block (under the chips) ─────────────────────────── */
.genv2-prev-actions { display: flex; flex-direction: column; gap: .55rem; margin-top: 1rem; }

/* "Preview as recipient" / "Continue to delivery" appear once a wish EXISTS
   (.has-wish — set after the first successful /generate and never reset),
   NOT per-screen: on mobile the form returns to the compose fields while
   the preview keeps its full result state, buttons included. */
.genv2-preview-recipient { margin-top: 0; }
.genv2-canvas:not(.has-wish) .genv2-preview-recipient { display: none; }
.genv2-canvas:not(.has-wish) .genv2-prev-continue { display: none; }

/* The flow-navigation buttons live in the preview ONLY on mobile (inside
   the fullscreen overlay). Desktop keeps them in the left result panel. */
@media (min-width: 981px) {
	.genv2-prev-continue,
	.genv2-prev-back { display: none !important; }
}

/* ── Fullscreen generation spinner (mobile) ─────────────────────────── */
.genv2-genload {
	position: fixed; inset: 0; z-index: 9996;
	display: none; flex-direction: column; align-items: center; justify-content: center; gap: 1rem;
	background: rgba(250, 247, 242, 0.92);
	-webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.genv2-genload.is-on { display: flex; }
.genv2-genload-spin {
	width: 52px; height: 52px; border-radius: 50%;
	border: 4px solid rgba(96, 80, 176, 0.18);
	border-top-color: var(--v2-primary, #6050b0);
	animation: genv2-genload-rot 0.85s linear infinite;
}
@keyframes genv2-genload-rot { to { transform: rotate(360deg); } }
.genv2-genload-text { font-weight: 600; color: var(--v2-text, #313330); font-size: .95rem; }
@media (prefers-reduced-motion: reduce) { .genv2-genload-spin { animation-duration: 1.6s; } }

/* ── "Preview as recipient" fullscreen overlay ──────────────────────── */
.genv2-recipient-overlay {
	position: fixed; inset: 0; z-index: 9998; display: flex; flex-direction: column;
	background: rgba(20, 16, 40, 0.55); opacity: 0; transition: opacity .2s ease;
}
.genv2-recipient-overlay.is-open { opacity: 1; }
.genv2-recipient-bar {
	display: flex; align-items: center; justify-content: space-between; gap: 1rem;
	padding: .75rem 1.1rem; color: #fff; font-size: .9rem; font-weight: 600;
	background: rgba(0,0,0,.25); flex: 0 0 auto;
}
.genv2-recipient-x { width: 38px; height: 38px; border-radius: 10px; border: none; background: rgba(255,255,255,.15); color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; }
.genv2-recipient-x:hover { background: rgba(255,255,255,.28); }
.genv2-recipient-frame { flex: 1 1 auto; width: 100%; border: 0; background: var(--v2-bg, #faf7f2); }

/* ── Mobile bottom-sheet mini-editor ────────────────────────────────── */
.genv2-sheet-host { position: fixed; inset: 0; z-index: 9997; }
.genv2-sheet-scrim { position: absolute; inset: 0; background: rgba(20,16,40,.45); opacity: 0; transition: opacity .2s; }
.genv2-sheet-host.is-open .genv2-sheet-scrim { opacity: 1; }
.genv2-sheet {
	position: absolute; left: 0; right: 0; bottom: 0;
	/* Fallbacks matter: the sheet historically mounted on <body>, OUTSIDE the
	   .genv2-section token scope, which made var(--v2-bg-white) resolve to
	   nothing → fully transparent sheet. It now mounts inside #genv2-root,
	   but keep literal fallbacks so it can never go transparent again. */
	background: var(--v2-bg-white, #ffffff);
	border-radius: 22px 22px 0 0; box-shadow: 0 -16px 40px -16px rgba(20,16,40,.4);
	padding: 8px 18px calc(20px + env(safe-area-inset-bottom)); max-height: 86%; overflow: auto;
	transform: translateY(100%); transition: transform .26s var(--v2-ease, cubic-bezier(.2,.9,.25,1.1));
}
.genv2-sheet-host.is-open .genv2-sheet { transform: translateY(0); }
.genv2-sheet-grab { width: 40px; height: 4px; border-radius: 2px; background: var(--v2-border, #e5e1d8); margin: 8px auto 14px; }
.genv2-sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.genv2-sheet-head h4 { margin: 0; font-size: 1.05rem; font-weight: 700; }
.genv2-sheet-x { width: 32px; height: 32px; border: none; background: transparent; font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--v2-text-muted); }
.genv2-sheet-body { margin-bottom: 1.25rem; }

/* Select2 dropdown opened from inside the recipient sheet: its default
   z-index (1051) would bury it UNDER the sheet (9997). Body-mounted, so a
   global lift above every sheet/overlay layer is required. */
.select2-container--open { z-index: 10700; }
.select2-container--open .select2-dropdown { z-index: 10700; }

/* ── Mobile (≤980px): single column, preview below, no internal scroll ── */
@media (max-width: 980px) {
	.genv2-canvas .genv2-grid--stepped { grid-template-columns: 1fr; }
	.genv2-canvas .genv2-form--stepped {
		border-radius: 24px 24px 0 0; max-height: none; overflow-y: visible;
	}
	.genv2-canvas .genv2-result {
		position: static; max-height: none; overflow-y: visible;
		border-radius: 0 0 24px 24px; border-left: none; border-top: 1px solid var(--v2-border);
	}
}

/* =====================================================================
   DESIGN PARITY — compose = one continuous form (no step headers) +
   "Look & format" divider + hero mini-generator
   ===================================================================== */

/* The compose steps must read as ONE form (design has only field labels,
   no "Step 1 / Occasion & tone" section headers). Delivery keeps its
   header ("When & where"); the result screen has its own header. */
.genv2-canvas .genv2-step:not(.genv2-step--delivery) .genv2-panel-h { display: none; }
/* first compose field hugs the top now that the header is gone */
.genv2-canvas[data-screen="compose"] .genv2-step[data-step="1"] { padding-top: .25rem; }

/* "Look & format · optional · smart defaults" divider injected before the
   secondary fields by generator-screens.js. */
.genv2-lookformat {
	display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
	margin: .25rem 0 1.25rem; padding-top: 1.4rem; border-top: 1px solid var(--v2-border);
}
.genv2-lookformat-label { font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--v2-text-muted); }
.genv2-lookformat-hint  { font-size: .75rem; color: var(--v2-text-muted); }

/* ── Hero mini-generator ────────────────────────────────────────────── */
.hhl-mini-gen {
	background: var(--color-bg-white, #fff);
	border: 1px solid var(--color-border, rgba(178,178,174,.25));
	border-radius: 20px;
	padding: 1.25rem 1.35rem 1.1rem;
	box-shadow: 0 18px 48px -22px rgba(96, 80, 176, 0.28), 0 3px 10px rgba(49, 51, 48, 0.05);
	max-width: 520px;
	margin-top: .25rem;
}
.hhl-mini-eyebrow {
	display: inline-flex; align-items: center; gap: .5rem;
	font-size: .78rem; font-weight: 700; color: var(--color-primary, #6050b0);
	background: rgba(96, 80, 176, 0.07); border-radius: 999px; padding: .35rem .8rem; margin-bottom: .9rem;
}
.hhl-mini-dot { width: 8px; height: 8px; border-radius: 50%; background: #10b981; box-shadow: 0 0 0 0 rgba(16,185,129,.5); animation: hhl-mini-pulse 2s ease-out infinite; }
@keyframes hhl-mini-pulse { 0% { box-shadow: 0 0 0 0 rgba(16,185,129,.5); } 100% { box-shadow: 0 0 0 8px rgba(16,185,129,0); } }
.hhl-mini-label { font-weight: 700; font-size: 1rem; color: var(--color-text-dark, #313330); margin-bottom: .7rem; }
.hhl-mini-chips { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: .9rem; }
.hhl-mini-chip {
	display: inline-flex; align-items: center; gap: .4rem;
	padding: .5rem .85rem; border-radius: 999px; font-family: inherit;
	border: 1.5px solid var(--color-border-strong, rgba(178,178,174,.5));
	background: var(--color-bg-white, #fff); color: var(--color-text-dark, #313330);
	font-size: .86rem; font-weight: 600; cursor: pointer; transition: all .15s ease;
}
.hhl-mini-chip:hover { border-color: var(--color-primary, #6050b0); color: var(--color-primary, #6050b0); }
.hhl-mini-chip.active { background: var(--color-primary, #6050b0); border-color: var(--color-primary, #6050b0); color: #fff; }
.hhl-mini-chip-emoji { font-size: 1rem; line-height: 1; }
.hhl-mini-chip--more { color: var(--color-primary, #6050b0); border-style: dashed; }
.hhl-mini-inputrow { display: flex; gap: .5rem; margin-bottom: .8rem; }
.hhl-mini-input {
	flex: 1 1 auto; min-width: 0; padding: .8rem .95rem; border-radius: 12px; font-family: inherit; font-size: .95rem;
	border: 1.5px solid var(--color-border-strong, rgba(178,178,174,.5)); background: var(--color-bg-white, #fff); color: var(--color-text-dark, #313330);
}
.hhl-mini-input:focus { outline: none; border-color: var(--color-primary, #6050b0); box-shadow: 0 0 0 3px rgba(96, 80, 176, 0.12); }
.hhl-mini-go {
	flex: 0 0 auto; display: inline-flex; align-items: center; gap: .45rem;
	padding: .8rem 1.25rem; border: none; border-radius: 12px; font-family: inherit; font-weight: 700; font-size: .95rem; cursor: pointer;
	background: linear-gradient(135deg, #6050b0 0%, #c4b8ff 100%); color: #fff;
	box-shadow: 0 10px 24px -10px rgba(96, 80, 176, 0.6); transition: transform .12s ease, filter .15s ease;
}
.hhl-mini-go:hover { filter: brightness(1.04); transform: translateY(-1px); }
.hhl-mini-go:active { transform: scale(.98); }
.hhl-mini-foot { display: flex; align-items: center; gap: .5rem; font-size: .82rem; color: var(--color-text-muted, #5e5f5c); }
.hhl-mini-foot a { color: var(--color-primary, #6050b0); text-decoration: none; font-weight: 600; }
.hhl-mini-foot a:hover { text-decoration: underline; }
.hhl-mini-sep { opacity: .5; }
@media (max-width: 560px) {
	.hhl-mini-inputrow { flex-wrap: wrap; }
	.hhl-mini-go { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .hhl-mini-dot { animation: none; } }

/* Non-wide screens — tablets (single-column hero ≤1100px) AND 13-14" laptops
   (two-column, ~1280-1599px): the mini-generator sits glued to the left edge
   of its column with empty space to its right. Nudge it 60px toward the
   centre so it reads as deliberately placed (design feedback, 2026-06-11).
   margin-inline-start keeps "right" correct in LTR and mirrors for RTL
   (he/ar). Phones ≤560px are excluded — there the card is already
   full-width, so a shift would overflow / cramp it. Wide desktops ≥1600px
   keep the original flush-left placement. */
@media (min-width: 561px) and (max-width: 1599px) {
	.hhl-mini-gen { margin-inline-start: 60px; }
}

/* Short desktop viewports (13-14" laptops) — compact mini-generator so its
   Generate button stays above the fold. Pairs with the matching hero
   compaction in home-hero-live.css. */
@media (min-width: 981px) and (max-height: 780px) {
	.hhl-mini-gen { padding: .9rem 1.05rem .8rem; }
	.hhl-mini-eyebrow { margin-bottom: .55rem; padding: .25rem .7rem; font-size: .72rem; }
	.hhl-mini-label { font-size: .92rem; margin-bottom: .5rem; }
	.hhl-mini-chips { gap: .35rem; margin-bottom: .6rem; }
	.hhl-mini-chip { padding: .38rem .7rem; font-size: .8rem; }
	.hhl-mini-inputrow { margin-bottom: .55rem; }
	.hhl-mini-input { padding: .6rem .8rem; font-size: .9rem; }
	.hhl-mini-go { padding: .6rem 1rem; font-size: .88rem; }
	.hhl-mini-foot { font-size: .76rem; }
}

/* =====================================================================
   FULLSCREEN GENERATOR MODAL (design parity: .lg-scrim / .lg-modal)
   The inline generator section is gone from the front page; the same
   generator-stepped markup renders inside this modal instead.
   ===================================================================== */
.dg-gen-modal {
	position: fixed; inset: 0; z-index: 9990;
	display: none; flex-direction: column;
	background: var(--v2-bg, #faf7f2);
}
.dg-gen-modal.is-open { display: flex; }
.dg-gen-modal-top {
	flex: 0 0 auto;
	display: flex; align-items: center; justify-content: space-between;
	padding: .7rem 1.1rem;
	background: rgba(255, 255, 255, 0.92);
	-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--v2-border);
}
.dg-gen-modal-brand { display: flex; align-items: center; gap: .6rem; font-weight: 800; letter-spacing: -0.01em; color: var(--v2-text); }
.dg-gen-modal-logo {
	width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center;
	background: linear-gradient(135deg, #6050b0 0%, #c4b8ff 100%); color: #fff; font-weight: 800;
}
.dg-gen-modal-x {
	width: 40px; height: 40px; border: none; border-radius: 12px; cursor: pointer;
	background: transparent; color: var(--v2-text-muted); font-size: 1.7rem; line-height: 1;
	transition: background .15s, color .15s;
}
.dg-gen-modal-x:hover { background: rgba(0,0,0,.06); color: var(--v2-text); }
.dg-gen-modal-stage {
	flex: 1 1 auto;
	overflow-y: auto;
	/* The ambient blobs (.genv2-section::before/::after, 40-46vw circles
	   offset past the section edges) used to be clipped by the section's own
	   overflow:hidden — canvas mode opens that up for sticky, so the stage
	   must clip horizontally or it grows a horizontal scrollbar. */
	overflow-x: clip;
	-webkit-overflow-scrolling: touch;
}

/* Page behind an open modal/sheet/preview must NOT scroll. The .body-locked
   class is set by JS; this :has() belt-and-braces enforces it even if a
   close path misses the class. */
html:has(.dg-gen-modal.is-open),
body:has(.dg-gen-modal.is-open),
html:has(.genv2-sheet-host),
body:has(.genv2-sheet-host),
html:has(.genv2-preview-open),
body:has(.genv2-preview-open) { overflow: hidden !important; }

/* Real site logo in the modal top bar */
.dg-gen-modal-logo-img { width: 140px; height: 35px; object-fit: contain; display: block; }

/* Generator section inside the modal: drop the marketing paddings, center
   wide, keep the ambient blobs. Sticky preview now tracks the stage scroll.
   overflow-x:clip pins the decorative blobs (::before/::after stick out past
   the section edges) WITHOUT creating a scroll container, so the stage never
   grows horizontal overflow and sticky keeps working. */
.dg-gen-modal .genv2-section { padding: 1.25rem 0 3rem; overflow-x: clip; }
.dg-gen-modal .genv2-section .container { max-width: 1240px; }
/* The preview panel has NO height cap / inner scroll anywhere — the modal
   stage is the single scroll; smart-float JS keeps the panel in view. */
.dg-gen-modal .genv2-canvas .genv2-form--stepped { max-height: none; overflow-y: visible; }

/* Two-column row for Length + Language (design: side by side). Built by
   generator-screens.js wrapping the two existing fields. */
.genv2-twocol { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.genv2-twocol .genv2-field { margin-bottom: 1.15rem; }
@media (max-width: 560px) { .genv2-twocol { grid-template-columns: 1fr; gap: 0; } }

/* =====================================================================
   MOBILE generator layout (design parity, ≤980px inside the modal):
   sticky mini-card header (tap → fullscreen preview) + fixed Generate CTA.
   ===================================================================== */
.genv2-mob-mini { display: none; }
@media (max-width: 980px) {
	.genv2-mob-mini {
		position: sticky; top: 0; z-index: 30;
		display: flex; align-items: center; gap: .7rem;
		margin: 0 0 1rem; padding: .8rem .9rem;
		border: none; border-radius: 14px; width: 100%;
		color: #fff; text-align: left; cursor: pointer; font-family: inherit;
		background: linear-gradient(135deg, #9d8de8, #6050b0);
		box-shadow: 0 10px 26px -12px rgba(96, 80, 176, 0.6);
	}
	.genv2-mob-mini.is-light { color: #2a2440; }
	.genv2-mob-mini-glyph {
		width: 38px; height: 38px; border-radius: 10px; flex: 0 0 auto;
		display: grid; place-items: center; font-size: 1.25rem;
		background: rgba(255, 255, 255, 0.25);
	}
	.genv2-mob-mini-body { flex: 1 1 auto; min-width: 0; }
	.genv2-mob-mini-name { font-weight: 800; font-size: .95rem; display: block; }
	.genv2-mob-mini-snippet {
		font-size: .78rem; opacity: .85; display: block;
		overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
	}
	.genv2-mob-mini-open { font-size: .72rem; font-weight: 700; opacity: .85; flex: 0 0 auto; }

	/* The right preview column is HIDDEN in-flow on mobile; it opens as a
	   fullscreen sheet from the mini-card. display:block (not flex): flex
	   sizing fought the inner card's aspect-ratio and broke scrolling to
	   the bottom of tall content. */
	.genv2-canvas .genv2-result { display: none; }
	.genv2-canvas.genv2-preview-open .genv2-result {
		display: block; position: fixed; inset: 0; z-index: 9995;
		/* Explicit size: top/bottom alone left the panel at content height
		   in some engines (peeking page underneath). dvh tracks the real
		   visible viewport on mobile URL-bar collapse. */
		width: 100vw;
		height: 100vh;
		height: 100dvh;
		max-height: none; min-height: 0; border-radius: 0; border: none;
		overflow-y: auto; -webkit-overflow-scrolling: touch;
		padding: 1.1rem 1.1rem 3.5rem;
	}
	/* Keep the card a sane size in the fullscreen preview (it was scaling
	   to the full viewport width → enormous and unscannable). */
	.genv2-canvas.genv2-preview-open #genv2-live-card-wrap {
		max-width: 420px; margin-left: auto; margin-right: auto;
	}

	/* Mobile has NO left "Your wish is ready" screen — the whole result
	   experience lives in the preview overlay. */
	.genv2-canvas .genv2-screen--result { display: none !important; }

	/* Result tools relocated to the BOTTOM of the preview (low priority):
	   separated by a rule line, hidden until a wish exists. */
	.genv2-canvas .genv2-result .genv2-result-tools {
		display: block;
		margin-top: 1.5rem;
		padding-top: 1.25rem;
		border-top: 1px solid var(--v2-border, #e5e1d8);
	}
	.genv2-canvas:not(.has-wish) .genv2-result .genv2-result-tools { display: none; }
	.genv2-canvas.genv2-preview-open .genv2-prev-close {
		display: grid; place-items: center;
		/* absolute against the fixed panel — vertically centred on the
		   "How it lands" header row instead of floating above it */
		position: absolute; top: 1.05rem; right: 1rem; z-index: 5;
		width: 40px; height: 40px; border: none; border-radius: 12px;
		background: rgba(0, 0, 0, 0.08); color: var(--v2-text, #313330);
		font-size: 1.6rem; line-height: 1; cursor: pointer;
	}

	/* Fixed Generate CTA at the bottom of the viewport on compose. */
	.dg-gen-modal .genv2-canvas[data-screen="compose"] .genv2-step[data-step="3"] .genv2-step-nav {
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 9991;
		margin: 0; padding: .8rem 1rem calc(.8rem + env(safe-area-inset-bottom));
		background: linear-gradient(180deg, rgba(255,255,255,0), #fff 32%);
	}
	/* Room for the fixed CTA so the quota line ("N free wishes left") and the
	   share toggle scroll fully into view instead of dying under the button. */
	.dg-gen-modal .genv2-canvas[data-screen="compose"] .genv2-form--stepped { padding-bottom: 9.5rem; }
	.dg-gen-modal .genv2-canvas .genv2-quota { position: relative; z-index: 1; margin-bottom: .75rem; }
}

/* Bottom breathing room on every viewport so the modal scrolls past the
   quota line comfortably. */
.dg-gen-modal .genv2-section { padding-bottom: 4.5rem; }

/* ── Guest in-card photo dropzone: gold "registered users" treatment ── */
.genv2-live-card-photo-empty--locked {
	position: relative;
	border: 1.5px dashed rgba(240, 200, 120, 0.85) !important;
	background: linear-gradient(180deg, rgba(240, 200, 120, 0.10), rgba(240, 200, 120, 0.04));
	cursor: pointer;
}
.genv2-canvas .genv2-live-card-photo-empty.genv2-live-card-photo-empty--locked .genv2-locked-star {
	position: absolute;
	/* Inside the zone — the card clips overflow, so a -9px offset got cut.
	   Selector strength beats the generic .genv2-locked-star placement from
	   generator-v2-redesign.css (which loads after this file). */
	top: 8px;
	right: 8px;
	left: auto;
	bottom: auto;
	transform: none;
	width: 22px;
	height: 22px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	color: #fff;
	background: linear-gradient(135deg, #f0c878, #c89548);
	box-shadow: 0 4px 10px -2px rgba(200, 149, 72, 0.6);
}
.genv2-live-card-photo-empty--locked .genv2-locked-star svg { width: 12px; height: 12px; }