@mundogamernetwork/shared-ui 1.0.0

package/components/indie-wall/StepCustomize.vue

@@ -0,0 +1,530 @@
+<script setup lang="ts">
+const props = withDefaults(defineProps<{
+	form: {
+		title: string
+		message: string
+		background_color: string
+		image_url: string
+		link: string
+		is_anonymous: boolean
+		guest_email: string
+		guest_name: string
+	}
+	isGuest: boolean
+	pixelW?: number
+	pixelH?: number
+}>(), {
+	pixelW: 1,
+	pixelH: 1,
+})
+
+const emit = defineEmits<{
+	(e: 'update', form: typeof props.form): void
+	(e: 'next'): void
+}>()
+
+const local = reactive({ ...props.form })
+
+watch(local, (v) => emit('update', { ...v }), { deep: true })
+
+const fileInput = ref<HTMLInputElement | null>(null)
+const imageError = ref('')
+const uploading = ref(false)
+
+const titleError = ref('')
+const messageError = ref('')
+const imageMissingError = ref('')
+const emailError = ref('')
+
+const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+const URL_REGEX = /^https?:\/\/.+\..+/
+
+const linkError = ref('')
+
+function validateLink() {
+	const val = local.link.trim()
+	if (!val) { linkError.value = ''; return }
+	// Auto-prepend https:// if user typed a bare domain (no protocol, no spaces)
+	if (!/^https?:\/\//i.test(val) && !val.includes(' ')) {
+		local.link = 'https://' + val
+	}
+	if (!URL_REGEX.test(local.link.trim())) {
+		linkError.value = t('tv.dashboard.indie_wall.step_customize_link_error')
+	} else {
+		linkError.value = ''
+	}
+}
+
+const MAX_TITLE = 60
+const MAX_MESSAGE = 200
+const MAX_IMAGE_BYTES = 256 * 1024
+
+// Original image kept in memory for crop re-rendering; separate from the exported base64.
+const originalImageUrl = ref(props.form.image_url || '')
+const cropOffsetX = ref(50)
+const cropOffsetY = ref(50)
+const isDragging = ref(false)
+let dragStartX = 0
+let dragStartY = 0
+let dragStartOX = 50
+let dragStartOY = 50
+const previewRef = ref<HTMLElement | null>(null)
+
+// Preview dimensions respect the actual block aspect ratio (pixelW × pixelH).
+const previewSize = computed(() => {
+	const maxLong = 160
+	const minShort = 24
+	const w = props.pixelW ?? 1
+	const h = props.pixelH ?? 1
+	if (w >= h) {
+		return { width: maxLong, height: Math.max(minShort, Math.round(maxLong * h / w)) }
+	} else {
+		return { height: maxLong, width: Math.max(minShort, Math.round(maxLong * w / h)) }
+	}
+})
+
+function readFileAsDataUrl(file: File): Promise<string> {
+	return new Promise((resolve, reject) => {
+		const reader = new FileReader()
+		reader.onload = () => resolve(reader.result as string)
+		reader.onerror = reject
+		reader.readAsDataURL(file)
+	})
+}
+
+async function onPickFile(e: Event) {
+	const target = e.target as HTMLInputElement
+	const file = target.files?.[0]
+	if (!file) return
+	imageError.value = ''
+	imageMissingError.value = ''
+	if (!file.type.startsWith('image/')) {
+		imageError.value = 'Please choose an image file.'
+		target.value = ''
+		return
+	}
+	uploading.value = true
+	try {
+		originalImageUrl.value = await readFileAsDataUrl(file)
+		cropOffsetX.value = 50
+		cropOffsetY.value = 50
+		// Clear any previously exported image so validation passes only after export on next()
+		local.image_url = originalImageUrl.value
+	} catch {
+		imageError.value = 'Could not load this image.'
+	} finally {
+		uploading.value = false
+		target.value = ''
+	}
+}
+
+function clearImage() {
+	originalImageUrl.value = ''
+	local.image_url = ''
+	imageError.value = ''
+	cropOffsetX.value = 50
+	cropOffsetY.value = 50
+}
+
+// Bake current crop + aspect ratio into a fixed-size base64 for the API.
+function exportCrop(): Promise<string> {
+	return new Promise((resolve, reject) => {
+		const img = new Image()
+		img.onload = () => {
+			const pw = props.pixelW ?? 1
+			const ph = props.pixelH ?? 1
+			const MAX = 256
+			let targetW: number, targetH: number
+			if (pw >= ph) {
+				targetW = MAX
+				targetH = Math.max(1, Math.round(MAX * ph / pw))
+			} else {
+				targetH = MAX
+				targetW = Math.max(1, Math.round(MAX * pw / ph))
+			}
+			const canvas = document.createElement('canvas')
+			canvas.width = targetW
+			canvas.height = targetH
+			const ctx = canvas.getContext('2d')
+			if (!ctx) return reject(new Error('No canvas context'))
+			ctx.imageSmoothingEnabled = true
+			// object-fit: cover with user-chosen crop offset
+			const scale = Math.max(targetW / img.width, targetH / img.height)
+			const scaledW = img.width * scale
+			const scaledH = img.height * scale
+			const drawX = -(scaledW - targetW) * (cropOffsetX.value / 100)
+			const drawY = -(scaledH - targetH) * (cropOffsetY.value / 100)
+			ctx.drawImage(img, drawX, drawY, scaledW, scaledH)
+			resolve(canvas.toDataURL('image/jpeg', 0.82))
+		}
+		img.onerror = reject
+		img.src = originalImageUrl.value
+	})
+}
+
+// Drag-to-crop on the preview.
+function startCropDrag(e: PointerEvent) {
+	if (!originalImageUrl.value) { fileInput.value?.click(); return }
+	isDragging.value = true
+	dragStartX = e.clientX
+	dragStartY = e.clientY
+	dragStartOX = cropOffsetX.value
+	dragStartOY = cropOffsetY.value
+	;(e.currentTarget as HTMLElement).setPointerCapture(e.pointerId)
+}
+
+function onCropMove(e: PointerEvent) {
+	if (!isDragging.value) return
+	const el = previewRef.value
+	if (!el) return
+	// Sensitivity: move 1px on screen ≈ how many % of offset change.
+	// We invert direction: dragging right moves the "view" right (crop shifts left).
+	const sensitivity = 100 / Math.max(el.offsetWidth, el.offsetHeight, 1)
+	cropOffsetX.value = Math.max(0, Math.min(100, dragStartOX - (e.clientX - dragStartX) * sensitivity))
+	cropOffsetY.value = Math.max(0, Math.min(100, dragStartOY - (e.clientY - dragStartY) * sensitivity))
+}
+
+function endCropDrag() {
+	isDragging.value = false
+}
+
+async function next() {
+	titleError.value = ''
+	messageError.value = ''
+	imageMissingError.value = ''
+	emailError.value = ''
+	validateLink()
+	if (props.isGuest) {
+		if (!local.guest_email.trim()) {
+			emailError.value = 'Email is required.'
+		} else if (!EMAIL_REGEX.test(local.guest_email.trim())) {
+			emailError.value = 'Please enter a valid email.'
+		}
+	}
+	if (!local.is_anonymous && !local.title.trim()) {
+		titleError.value = 'Display name is required.'
+	}
+	if (!local.message.trim()) {
+		messageError.value = 'A message is required.'
+	}
+	if (!originalImageUrl.value) {
+		imageMissingError.value = 'Please upload an image for your pixel.'
+	}
+	if (emailError.value || titleError.value || messageError.value || imageMissingError.value || linkError.value) return
+
+	// Bake crop into final base64 before advancing.
+	uploading.value = true
+	try {
+		const cropped = await exportCrop()
+		if (cropped.length > MAX_IMAGE_BYTES * 1.4) {
+			imageError.value = 'Image too large after resize. Pick a smaller image.'
+			return
+		}
+		local.image_url = cropped
+	} catch {
+		imageError.value = 'Could not process image.'
+		return
+	} finally {
+		uploading.value = false
+	}
+
+	emit('next')
+}
+</script>
+
+<template>
+	<div class="sw-step">
+		<h3 class="sw-step-title">{{ $t('tv.dashboard.indie_wall.step_customize_title') }}</h3>
+		<p class="sw-step-help">{{ $t('tv.dashboard.indie_wall.step_customize_help') }}</p>
+
+		<div v-if="isGuest" class="sw-guest-block">
+			<p class="sw-guest-intro">{{ $t('tv.dashboard.indie_wall.guest_intro') }}</p>
+			<div class="sw-field">
+				<label>{{ $t('tv.dashboard.indie_wall.guest_name_label') }}</label>
+				<input
+					v-model="local.guest_name"
+					type="text"
+					autocomplete="name"
+					:placeholder="$t('tv.dashboard.indie_wall.guest_name_placeholder')"
+				/>
+			</div>
+			<div class="sw-field">
+				<label>{{ $t('tv.dashboard.indie_wall.guest_email_label') }} *</label>
+				<input
+					v-model="local.guest_email"
+					type="email"
+					autocomplete="email"
+					:placeholder="$t('tv.dashboard.indie_wall.guest_email_placeholder')"
+					:class="{ 'sw-input-error': emailError }"
+				/>
+				<p v-if="emailError" class="sw-error-inline">{{ emailError }}</p>
+			</div>
+		</div>
+
+		<div class="sw-field">
+			<label>{{ $t('tv.dashboard.indie_wall.step_customize_image') }} *</label>
+
+			<!-- Live pixel preview at correct block aspect ratio -->
+			<div class="sw-preview-wrapper">
+				<div
+					ref="previewRef"
+					class="sw-pixel-preview"
+					:class="{
+						'sw-pixel-preview--dragging': isDragging,
+						'sw-image-error-border': imageMissingError,
+					}"
+					:style="{
+						width: previewSize.width + 'px',
+						height: previewSize.height + 'px',
+						background: local.background_color || '#13161C',
+						cursor: originalImageUrl ? (isDragging ? 'grabbing' : 'grab') : 'pointer',
+					}"
+					@pointerdown="startCropDrag"
+					@pointermove="onCropMove"
+					@pointerup="endCropDrag"
+					@pointercancel="endCropDrag"
+				>
+					<img
+						v-if="originalImageUrl"
+						:src="originalImageUrl"
+						class="sw-preview-img"
+						:style="{ objectPosition: `${cropOffsetX}% ${cropOffsetY}%` }"
+						draggable="false"
+					/>
+					<span v-else class="sw-image-empty">+</span>
+					<span
+						v-if="!local.is_anonymous && local.title"
+						class="sw-preview-title-overlay"
+					>{{ local.title }}</span>
+					<span v-if="originalImageUrl && !isDragging" class="sw-crop-hint">
+						{{ $t('tv.dashboard.indie_wall.drag_to_crop') }}
+					</span>
+				</div>
+				<p class="sw-preview-dims">{{ pixelW }} × {{ pixelH }}</p>
+			</div>
+
+			<div class="sw-image-actions">
+				<button type="button" class="sw-image-btn" :disabled="uploading" @click="fileInput?.click()">
+					{{ uploading ? '…' : (originalImageUrl
+						? $t('tv.dashboard.indie_wall.step_customize_replace_image')
+						: $t('tv.dashboard.indie_wall.step_customize_upload_image'))
+					}}
+				</button>
+				<button v-if="originalImageUrl" type="button" class="sw-image-btn sw-image-remove" @click="clearImage">
+					{{ $t('tv.dashboard.indie_wall.step_customize_remove_image') }}
+				</button>
+				<input
+					ref="fileInput"
+					type="file"
+					accept="image/*"
+					style="display: none"
+					@change="onPickFile"
+				/>
+				<p class="sw-image-hint">
+					{{ $t('tv.dashboard.indie_wall.step_customize_image_hint') }}
+				</p>
+			</div>
+			<p v-if="imageError" class="sw-error-inline">{{ imageError }}</p>
+			<p v-if="imageMissingError" class="sw-error-inline">{{ imageMissingError }}</p>
+		</div>
+
+		<div class="sw-field">
+			<label>{{ $t('tv.dashboard.indie_wall.mural_title_field') }} *</label>
+			<input
+				v-model="local.title"
+				type="text"
+				:maxlength="MAX_TITLE"
+				:placeholder="$t('tv.dashboard.indie_wall.mural_title_placeholder')"
+				:class="{ 'sw-input-error': titleError }"
+				:disabled="local.is_anonymous"
+			/>
+			<p v-if="titleError" class="sw-error-inline">{{ titleError }}</p>
+		</div>
+
+		<div class="sw-field">
+			<label>{{ $t('tv.dashboard.indie_wall.message') }} *</label>
+			<textarea
+				v-model="local.message"
+				rows="2"
+				:maxlength="MAX_MESSAGE"
+				:placeholder="$t('tv.dashboard.indie_wall.message_placeholder')"
+				:class="{ 'sw-input-error': messageError }"
+			/>
+			<p v-if="messageError" class="sw-error-inline">{{ messageError }}</p>
+		</div>
+
+		<div class="sw-field">
+			<label>{{ $t('tv.dashboard.indie_wall.step_customize_link') }}</label>
+			<input
+				v-model="local.link"
+				type="text"
+				placeholder="https://"
+				:class="{ 'sw-input-error': linkError }"
+				@blur="validateLink"
+			/>
+			<p v-if="linkError" class="sw-error-inline">{{ linkError }}</p>
+		</div>
+
+		<label class="sw-checkbox">
+			<input v-model="local.is_anonymous" type="checkbox" />
+			{{ $t('tv.dashboard.indie_wall.anonymous') }}
+		</label>
+
+		<div class="sw-actions">
+			<button type="button" class="sw-confirm" :disabled="uploading" @click="next">
+				{{ uploading ? '…' : $t('tv.dashboard.indie_wall.step_customize_continue') }}
+			</button>
+		</div>
+	</div>
+</template>
+
+<style scoped lang="scss">
+.sw-step { display: flex; flex-direction: column; gap: 10px; }
+.sw-step-title { font-size: 1.05rem; font-weight: 600; color: var(--title-fg, #fff); margin: 0; }
+.sw-step-help { font-size: 0.82rem; color: var(--secondary-info-fg, #aaa); margin: 0 0 4px; }
+
+.sw-field {
+	display: flex; flex-direction: column; gap: 4px;
+	label { font-size: 0.75rem; color: var(--secondary-info-fg, #777); }
+	input, textarea {
+		background: #13161C; border: 1px solid #1e2028;
+		padding: 8px 10px; color: var(--title-fg, #fff);
+		font-size: 0.85rem; font-family: inherit; width: 100%;
+		&:focus { border-color: var(--chip-text, #D297FF); outline: none; }
+		&.sw-input-error { border-color: #ff6b6b; }
+		&:disabled { opacity: 0.5; cursor: not-allowed; }
+	}
+	textarea { resize: vertical; }
+}
+
+.sw-error-inline {
+	margin: 0;
+	color: #ff6b6b;
+	font-size: 0.75rem;
+}
+
+.sw-guest-block {
+	display: flex; flex-direction: column; gap: 8px;
+	background: #13161C; border: 1px solid #1e2028;
+	padding: 12px;
+}
+.sw-guest-intro {
+	margin: 0 0 4px;
+	font-size: 0.78rem;
+	color: var(--secondary-info-fg, #aaa);
+	line-height: 1.4;
+}
+
+// Preview wrapper: centres the block and shows dimensions below.
+.sw-preview-wrapper {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 4px;
+	margin-bottom: 8px;
+}
+
+.sw-preview-dims {
+	margin: 0;
+	font-size: 0.68rem;
+	color: var(--secondary-info-fg, #666);
+	letter-spacing: 0.03em;
+}
+
+// The live pixel preview — shape matches pixelW × pixelH.
+.sw-pixel-preview {
+	position: relative;
+	overflow: hidden;
+	border: 1px solid #1e2028;
+	flex-shrink: 0;
+	touch-action: none;
+	user-select: none;
+	transition: border-color 0.15s;
+
+	&:hover { border-color: var(--chip-text, #D297FF); }
+	&--dragging { border-color: var(--chip-text, #D297FF); }
+	&.sw-image-error-border { border-color: #ff6b6b; }
+}
+
+.sw-preview-img {
+	display: block;
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+	image-rendering: pixelated;
+	pointer-events: none;
+}
+
+.sw-image-empty {
+	position: absolute;
+	inset: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-size: 2rem;
+	color: var(--secondary-info-fg, #555);
+	font-weight: 200;
+}
+
+// Title overlay shown at the bottom of the preview (matches mural render).
+.sw-preview-title-overlay {
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	padding: 2px 4px;
+	background: rgba(0, 0, 0, 0.55);
+	color: #fff;
+	font-size: 0.6rem;
+	font-weight: 600;
+	text-align: center;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	pointer-events: none;
+}
+
+// "Drag to adjust" hint — fades in on hover.
+.sw-crop-hint {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	padding: 3px;
+	background: rgba(0, 0, 0, 0.6);
+	color: rgba(255, 255, 255, 0.75);
+	font-size: 0.6rem;
+	text-align: center;
+	opacity: 0;
+	transition: opacity 0.15s;
+	pointer-events: none;
+}
+.sw-pixel-preview:hover .sw-crop-hint { opacity: 1; }
+
+.sw-image-actions { display: flex; flex-direction: column; gap: 6px; }
+.sw-image-btn {
+	background: #1e2028; color: var(--title-fg, #fff);
+	border: 1px solid #272930; padding: 8px 12px;
+	font-size: 0.8rem; cursor: pointer; text-align: left;
+	&:hover { border-color: var(--chip-text, #D297FF); }
+	&:disabled { opacity: 0.5; cursor: not-allowed; }
+}
+.sw-image-remove { color: #ff6b6b; }
+.sw-image-hint { margin: 4px 0 0; font-size: 0.7rem; color: var(--secondary-info-fg, #888); line-height: 1.4; }
+
+.sw-checkbox {
+	display: flex; align-items: center; gap: 6px;
+	color: var(--secondary-info-fg, #888); font-size: 0.82rem;
+	cursor: pointer; user-select: none;
+	margin-top: 4px;
+}
+
+.sw-actions { display: flex; gap: 8px; justify-content: flex-end; }
+.sw-confirm {
+	background: var(--chip-text, #D297FF);
+	color: #13161C; border: none; padding: 10px 18px;
+	font-weight: 700; font-size: 0.85rem; cursor: pointer;
+	&:hover:not(:disabled) { opacity: 0.88; }
+	&:disabled { opacity: 0.5; cursor: not-allowed; }
+}
+</style>

package/components/indie-wall/StepGoal.vue

@@ -0,0 +1,169 @@
+<script setup lang="ts">
+defineProps<{
+	goals: any[]
+	selectedGoalId: number | null
+	currency: string
+}>()
+
+const emit = defineEmits<{
+	(e: 'select', goalId: number | null): void
+	(e: 'next'): void
+}>()
+
+function pick(goalId: number | null) {
+	emit('select', goalId)
+	emit('next')
+}
+</script>
+
+<template>
+	<div class="sw-step">
+		<h3 class="sw-step-title">{{ $t('tv.dashboard.indie_wall.step_goal_title') }}</h3>
+		<p class="sw-step-help">{{ $t('tv.dashboard.indie_wall.step_goal_help') }}</p>
+
+		<div class="sw-goals-grid">
+			<article
+				v-for="goal in goals"
+				:key="goal.id"
+				class="sw-goal"
+				:class="{ active: selectedGoalId === goal.id, reached: goal.is_reached }"
+			>
+				<header class="sw-goal-head">
+					<h4 class="sw-goal-title">{{ goal.title }}</h4>
+					<span v-if="goal.is_reached" class="sw-goal-badge">
+						{{ $t('tv.dashboard.indie_wall.reached') }}
+					</span>
+					<span v-else class="sw-goal-amount">
+						{{ currency }} {{ Number(goal.target_amount || 0).toFixed(0) }}
+					</span>
+				</header>
+
+				<ul class="sw-goal-attrs">
+					<li v-if="goal.description">
+						<span class="sw-attr-label">{{ $t('tv.dashboard.indie_wall.goal_card_you_help') }}:</span>
+						<span class="sw-attr-val">{{ goal.description }}</span>
+					</li>
+					<li>
+						<span class="sw-attr-label">{{ $t('tv.dashboard.indie_wall.goal_card_goal') }}:</span>
+						<span class="sw-attr-val">{{ goal.target_pixels }} {{ $t('tv.dashboard.indie_wall.spots_unit') }}</span>
+					</li>
+					<li v-if="goal.reward_description">
+						<span class="sw-attr-label">{{ $t('tv.dashboard.indie_wall.goal_card_result') }}:</span>
+						<span class="sw-attr-val">{{ goal.reward_description }}</span>
+					</li>
+				</ul>
+
+				<div class="sw-goal-progress">
+					<div class="sw-goal-progress-fill" :style="{ width: (goal.progress_percent || 0) + '%' }" />
+					<span class="sw-goal-progress-text">
+						{{ $t('tv.dashboard.indie_wall.goal_card_missing', { count: Math.max(0, (goal.target_pixels || 0) - (goal.current_pixels || 0)) }) }}
+					</span>
+				</div>
+
+				<button
+					type="button"
+					class="sw-goal-cta"
+					:disabled="goal.is_reached"
+					@click="!goal.is_reached && pick(goal.id)"
+				>
+					{{ goal.is_reached
+						? $t('tv.dashboard.indie_wall.reached')
+						: $t('tv.dashboard.indie_wall.goal_card_select') }}
+				</button>
+			</article>
+
+			<button class="sw-skip" :class="{ active: selectedGoalId === null }" type="button" @click="pick(null)">
+				<span class="sw-skip-title">{{ $t('tv.dashboard.indie_wall.step_goal_skip_title') }}</span>
+				<span class="sw-skip-desc">{{ $t('tv.dashboard.indie_wall.step_goal_skip_desc') }}</span>
+			</button>
+		</div>
+	</div>
+</template>
+
+<style scoped lang="scss">
+.sw-step { display: flex; flex-direction: column; gap: 12px; }
+.sw-step-title { font-size: 1.05rem; font-weight: 600; color: var(--title-fg, #fff); margin: 0; }
+.sw-step-help { font-size: 0.82rem; color: var(--secondary-info-fg, #aaa); margin: 0 0 4px; }
+
+.sw-goals-grid {
+	display: grid;
+	grid-template-columns: 1fr;
+	gap: 10px;
+}
+
+.sw-goal {
+	background: #191B20;
+	border: 1px solid #1e2028;
+	padding: 16px;
+	display: flex; flex-direction: column;
+	gap: 12px;
+
+	&.active { border-color: var(--chip-text, #D297FF); background: #1e2028; }
+	&.reached { border-color: rgba(76,175,80,0.25); }
+}
+.sw-goal-head {
+	display: flex; justify-content: space-between; align-items: flex-start; gap: 8px;
+}
+.sw-goal-title {
+	margin: 0; font-size: 0.96rem; font-weight: 700; color: var(--title-fg, #fff);
+	line-height: 1.3; flex: 1; min-width: 0;
+	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
+	overflow: hidden; word-break: break-word;
+}
+.sw-goal-amount { font-size: 0.85rem; font-weight: 700; color: var(--chip-text, #D297FF); white-space: nowrap; flex-shrink: 0; }
+.sw-goal-badge { background: rgba(76,175,80,0.12); color: #4caf50; font-size: 0.7rem; font-weight: 600; padding: 2px 6px; flex-shrink: 0; }
+
+.sw-goal-attrs {
+	list-style: none; padding: 0; margin: 0;
+	display: flex; flex-direction: column; gap: 6px;
+
+	li {
+		position: relative; padding-left: 12px;
+		font-size: 0.82rem; color: var(--title-fg, #fff); line-height: 1.4;
+		&::before {
+			content: ''; position: absolute; top: 7px; left: 0;
+			width: 5px; height: 5px;
+			background: var(--chip-text, #D297FF);
+		}
+	}
+}
+.sw-attr-label { font-weight: 700; color: var(--title-fg, #fff); margin-right: 4px; }
+.sw-attr-val { color: var(--secondary-info-fg, #aaa); }
+
+.sw-goal-progress {
+	position: relative; height: 24px;
+	background: #13161C; border: 1px solid #272930; overflow: hidden;
+}
+.sw-goal-progress-fill {
+	height: 100%; background: var(--chip-text, #D297FF);
+	opacity: 0.4; transition: width 0.4s ease; min-width: 2px;
+}
+.sw-goal-progress-text {
+	position: absolute; inset: 0;
+	display: flex; align-items: center; justify-content: center;
+	font-size: 0.72rem; color: var(--title-fg, #fff); padding: 0 8px;
+}
+
+.sw-goal-cta {
+	background: var(--chip-text, #D297FF); color: #13161C;
+	border: none; padding: 10px 14px;
+	font-size: 0.85rem; font-weight: 600;
+	cursor: pointer; transition: opacity 0.15s;
+	&:hover:not(:disabled) { opacity: 0.88; }
+	&:disabled { opacity: 0.5; cursor: not-allowed; background: #4caf50; color: #fff; }
+}
+
+.sw-skip {
+	background: transparent;
+	border: 1px dashed #272930;
+	padding: 14px 16px; cursor: pointer;
+	display: flex; flex-direction: column; gap: 4px; text-align: left;
+	color: inherit; font-family: inherit;
+	transition: border-color 0.15s, background 0.15s;
+
+	&:hover { border-color: var(--chip-text, #D297FF); }
+	&.active { border-color: var(--chip-text, #D297FF); background: #1e2028; }
+}
+.sw-skip-title { font-size: 0.9rem; font-weight: 600; color: var(--title-fg, #fff); }
+.sw-skip-desc { font-size: 0.78rem; color: var(--secondary-info-fg, #888); }
+</style>