body {
	padding: 0;
	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
}

h1 {
	font-size: 16px;
	margin-top: 0;
}

p {
	color: rgb(107, 114, 128);
	font-size: 15px;
	margin-bottom: 10px;
	margin-top: 5px;
}

.card {
	max-width: 620px;
	margin: 0 auto;
	padding: 16px;
	border: 1px solid lightgray;
	border-radius: 16px;
}

.card p:last-child {
	margin-bottom: 0;
}

.video-placeholder {
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}

.video-placeholder img,
.video-placeholder .absolute.inset-0.flex.items-center.justify-center,
.video-placeholder .absolute.bottom-2.right-2,
.video-placeholder .absolute.top-2.left-2 {
	pointer-events: none;
}

@media (max-width: 767px) {
	.progress-steps {
		gap: 0.15rem;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.progress-step {
		flex: 1 1 0;
		min-width: 0;
	}

	.progress-step > .relative:first-child {
		flex-shrink: 0;
	}

	.step-chip-wrap {
		width: 100%;
		display: flex;
		justify-content: center;
		padding: 0 2px;
	}

	.step-chip {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		max-width: 4.5rem;
		min-height: 2.5rem;
		padding: 0.35rem 0.25rem;
		font-size: 0.68rem;
		line-height: 1rem;
		text-align: center;
		white-space: normal;
		word-break: keep-all;
		overflow-wrap: break-word;
	}

	#step1LabelGlow {
		left: 2px;
		right: 2px;
	}
}

/* Print Optimization Styles */
@media print {
	:root {
		--print-ink: #111827;
		--print-muted: #5b6472;
		--print-border: #e6dccb;
		--print-border-strong: #d2b88b;
		--print-panel: #fffdfa;
		--print-panel-soft: #faf5ee;
		--print-accent: #a16207;
		--print-accent-soft: #f4e4c6;
		--print-success: #166534;
		--print-info: #1d4ed8;
	}

	@page {
		size: A4 portrait;
		margin: 11mm 11mm 13mm;
	}

	*,
	*::before,
	*::after {
		-webkit-print-color-adjust: exact !important;
		print-color-adjust: exact !important;
		box-shadow: none !important;
	}

	html,
	body {
		background: #ffffff !important;
		color: var(--print-ink) !important;
		margin: 0 !important;
		padding: 0 !important;
		min-height: auto !important;
		font-family: "Inter", "Noto Sans TC", Arial, sans-serif !important;
		font-size: 10.2pt !important;
		line-height: 1.42 !important;
	}

	#particles-canvas,
	#confetti-canvas,
	.energy-orb,
	nav,
	footer,
	.toast,
	.max-w-4xl.mx-auto.px-4.mb-16,
	body > section:not(#step4),
	.no-print,
	button,
	.energy-btn,
	.random-btn,
	[id$="Pulse"],
	[id$="OuterGlow"],
	[id$="Ring"],
	[id$="Glow"],
	[id$="LabelGlow"],
	.glass-gold,
	.animate-pulse-slow,
	.animate-pulse,
	.animate-float,
	.animate-gradient-flow,
	.animate-shimmer-fast,
	.ripple,
	a[data-line-cta] {
		display: none !important;
	}

	a {
		color: inherit !important;
		text-decoration: none !important;
	}

	[class*="glass"],
	[class*="backdrop-blur"],
	[class*="bg-gray-900"],
	[class*="bg-gradient"] {
		backdrop-filter: none !important;
		-webkit-backdrop-filter: none !important;
	}

	#step4 {
		display: block !important;
		max-width: none !important;
		margin: 0 !important;
		padding: 0 !important;
		opacity: 1 !important;
		transform: none !important;
		color: var(--print-ink) !important;
	}

	#step4 > .text-center.mb-12 {
		display: none !important;
	}

	.print-only {
		display: block !important;
	}

	.print-header {
		position: relative !important;
		display: flex !important;
		flex-direction: column !important;
		justify-content: space-between !important;
		margin: 0 !important;
		padding: 12px 14px !important;
		height: calc((297mm - 24mm) * 3 / 4) !important;
		min-height: 0 !important;
		box-sizing: border-box !important;
		border: 1px solid var(--print-border-strong) !important;
		border-radius: 22px !important;
		background:
			linear-gradient(135deg, rgba(255, 248, 236, 0.92) 0%, rgba(255, 255, 255, 1) 48%, rgba(249, 241, 226, 0.96) 100%) !important;
		overflow: hidden !important;
		page-break-after: always !important;
		break-after: page !important;
		page-break-inside: avoid !important;
		break-inside: avoid-page !important;
	}

	.print-header::before {
		content: "";
		position: absolute !important;
		inset: 0 0 auto 0 !important;
		height: 4px !important;
		background: linear-gradient(90deg, #6b4f2d 0%, #d4a249 40%, #f8d58a 72%, #b7791f 100%) !important;
	}

	.print-header::after {
		content: none;
		display: none !important;
		width: 0 !important;
		height: 0 !important;
		background: none !important;
	}

	.print-brand-header {
		position: relative !important;
		display: flex !important;
		flex: 1 1 auto !important;
		flex-direction: column !important;
		justify-content: center !important;
		text-align: center !important;
		margin-bottom: 10px !important;
		z-index: 1 !important;
	}

	.print-brand-kicker {
		margin: 0 0 6px 0 !important;
		font-size: 7.2pt !important;
		font-weight: 800 !important;
		letter-spacing: 0.24em !important;
		text-transform: uppercase !important;
		color: #8b5e34 !important;
	}

	.print-brand-logo {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		width: 31mm !important;
		height: 31mm !important;
		margin: 0 auto 8px auto !important;
		padding: 0 2.4mm !important;
		border-radius: 999px !important;
		border: 1.1px solid #111111 !important;
		background: radial-gradient(circle at 30% 30%, #2b2b2b 0%, #111111 62%, #000000 100%) !important;
		font-size: 13.3pt !important;
		font-weight: 900 !important;
		line-height: 1 !important;
		letter-spacing: -0.05em !important;
		text-align: center !important;
		box-sizing: border-box !important;
	}

	.print-brand-logo span {
		display: inline-block !important;
		vertical-align: middle !important;
	}

	.print-brand-black {
		color: #ffffff !important;
	}

	.print-brand-orange {
		color: #d97706 !important;
	}

	.print-plan-title {
		margin: 0 0 3px 0 !important;
		font-size: 16pt !important;
		font-weight: 900 !important;
		letter-spacing: -0.02em !important;
		line-height: 1.1 !important;
		color: #111111 !important;
	}

	.print-plan-title-accent {
		color: #9a3412 !important;
	}

	.print-plan-subtitle {
		margin: 0 !important;
		font-size: 7.3pt !important;
		letter-spacing: 0.16em !important;
		text-transform: uppercase !important;
		color: #7b8491 !important;
	}

	.print-date {
		margin: 0 0 10px 0 !important;
		text-align: center !important;
		font-size: 8.2pt !important;
		font-weight: 600 !important;
		color: #7b8491 !important;
	}

	#printContactSection {
		position: relative !important;
		margin-top: auto !important;
		padding: 9px 11px !important;
		border: 1px solid var(--print-border) !important;
		border-radius: 16px !important;
		background: linear-gradient(180deg, #fffdfa 0%, #faf6ef 100%) !important;
		page-break-inside: avoid !important;
		break-inside: avoid-page !important;
	}

	#printContactSection::before {
		content: "Contact";
		display: inline-block !important;
		margin: 0 0 6px 0 !important;
		padding: 2px 7px !important;
		border-radius: 999px !important;
		background: var(--print-accent-soft) !important;
		font-size: 6.8pt !important;
		font-weight: 800 !important;
		letter-spacing: 0.16em !important;
		text-transform: uppercase !important;
		color: var(--print-accent) !important;
	}

	#printContactSection h2 {
		margin: 0 0 4px 0 !important;
		font-size: 10.5pt !important;
		font-weight: 800 !important;
		color: var(--print-ink) !important;
	}

	.print-contact-item {
		font-size: 9pt !important;
		line-height: 1.35 !important;
		color: #3b4554 !important;
		word-break: break-word !important;
	}

	#workoutSummary {
		display: block !important;
		margin: 0 0 12px 0 !important;
		padding: 10px 12px !important;
		border: 1px solid #ecd6ae !important;
		border-left: 4px solid #c0841f !important;
		border-radius: 16px !important;
		background: linear-gradient(180deg, #fffaf2 0%, #fff5e7 100%) !important;
		font-size: 10pt !important;
		font-weight: 700 !important;
		line-height: 1.45 !important;
		color: #7c2d12 !important;
		text-align: left !important;
		page-break-inside: avoid !important;
		break-inside: avoid-page !important;
	}

	.print-section-heading {
		display: block !important;
		margin: 0 0 10px 0 !important;
		padding: 0 !important;
		text-align: center !important;
		page-break-before: always !important;
		break-before: page !important;
		break-after: avoid-page !important;
		page-break-after: avoid !important;
	}

	.print-section-label {
		display: inline-block !important;
		margin: 0 0 3px 0 !important;
		padding: 2px 8px !important;
		border-radius: 999px !important;
		background: var(--print-accent-soft) !important;
		font-size: 6.9pt !important;
		font-weight: 800 !important;
		letter-spacing: 0.16em !important;
		text-transform: uppercase !important;
		color: var(--print-accent) !important;
	}

	.print-section-title {
		margin: 0 !important;
		font-size: 13.8pt !important;
		font-weight: 900 !important;
		line-height: 1.08 !important;
		letter-spacing: -0.01em !important;
		color: var(--print-ink) !important;
	}

	#exerciseContainer {
		counter-reset: exercise-card !important;
		display: block !important;
		margin: 0 0 14px 0 !important;
	}

	#exerciseContainer > * {
		display: block !important;
		margin-bottom: 10px !important;
		page-break-inside: avoid !important;
		break-inside: avoid-page !important;
	}

	#exerciseContainer > *:nth-child(2n):not(:last-child) {
		page-break-after: always !important;
		break-after: page !important;
	}

	#exerciseContainer > *:last-child {
		margin-bottom: 0 !important;
	}

	.exercise-card {
		counter-increment: exercise-card !important;
		opacity: 1 !important;
		transform: none !important;
		animation: none !important;
		position: relative !important;
		overflow: visible !important;
		margin: 0 !important;
		padding: 11px 12px !important;
		border: 1px solid var(--print-border) !important;
		border-radius: 20px !important;
		background:
			linear-gradient(180deg, #fffefc 0%, #faf7f1 100%) !important;
		page-break-inside: avoid !important;
		break-inside: avoid-page !important;
	}

	.exercise-card::before {
		content: "Exercise " counter(exercise-card, decimal-leading-zero) !important;
		display: inline-block !important;
		margin: 0 0 6px 0 !important;
		padding: 2px 7px !important;
		border-radius: 999px !important;
		background: #f8ecda !important;
		font-size: 6.9pt !important;
		font-weight: 800 !important;
		letter-spacing: 0.15em !important;
		text-transform: uppercase !important;
		color: #92400e !important;
	}

	.exercise-card > div,
	.exercise-card .flex.flex-col.md\:flex-row.gap-6 {
		display: block !important;
	}

	.exercise-card .md\:w-1\/3,
	.exercise-card .video-placeholder,
	.exercise-card button,
	.exercise-card i {
		display: none !important;
	}

	.exercise-card .md\:w-2\/3 {
		width: 100% !important;
	}

	.exercise-card h3 {
		margin: 0 0 4px 0 !important;
		font-size: 12.4pt !important;
		font-weight: 900 !important;
		letter-spacing: -0.01em !important;
		line-height: 1.12 !important;
		color: var(--print-ink) !important;
	}

	.exercise-card p {
		margin: 0 0 4px 0 !important;
		font-size: 8.45pt !important;
		line-height: 1.33 !important;
		color: #4b5563 !important;
	}

	.exercise-card .grid.grid-cols-2 {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 5px !important;
		margin: 7px 0 0 0 !important;
	}

	.exercise-card .glass.rounded-xl {
		background: linear-gradient(180deg, #fdfaf5 0%, #f7f0e6 100%) !important;
		border: 1px solid #eadfcd !important;
		border-radius: 13px !important;
		padding: 5px 7px !important;
	}

	.exercise-card .text-2xl {
		font-size: 10.2pt !important;
		font-weight: 900 !important;
		line-height: 1.1 !important;
		color: #9a3412 !important;
	}

	.exercise-card .mt-4.space-y-3 {
		display: grid !important;
		gap: 4px !important;
		margin-top: 7px !important;
		padding-top: 7px !important;
		border-top: 1px dashed #d6c4a5 !important;
	}

	.exercise-card .mt-4.space-y-3 > div {
		padding: 0 !important;
		margin: 0 !important;
	}

	#personalInfoSummary {
		display: block !important;
		margin: 0 0 14px 0 !important;
		padding: 12px !important;
		border: 1px solid var(--print-border-strong) !important;
		border-radius: 18px !important;
		background: linear-gradient(180deg, #fffdf8 0%, #f8f3ea 100%) !important;
		page-break-before: always !important;
		break-before: page !important;
		page-break-inside: avoid !important;
		break-inside: avoid-page !important;
	}

	#personalInfoSummary > .flex {
		display: grid !important;
		grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) !important;
		gap: 10px !important;
		align-items: stretch !important;
	}

	#personalInfoSummary > .flex > .flex {
		margin: 0 !important;
		padding: 8px 9px !important;
		border: 1px solid #eadfcd !important;
		border-radius: 14px !important;
		background: rgba(255, 255, 255, 0.76) !important;
	}

	#personalInfoSummary i {
		display: none !important;
	}

	#personalInfoSummary p {
		margin: 0 !important;
	}

	#personalInfoText,
	#proteinResult {
		font-weight: 800 !important;
		color: var(--print-ink) !important;
	}

	.print-luxury-section,
	.nutrition-section,
	.hydration-section {
		margin: 0 0 14px 0 !important;
		padding-top: 8px !important;
		border-top: 1px solid #efe3ce !important;
		page-break-inside: auto !important;
		break-inside: auto !important;
	}

	#step4 .mb-16 > .flex.items-center.justify-center {
		display: flex !important;
		justify-content: space-between !important;
		align-items: flex-end !important;
		gap: 10px !important;
		margin: 0 0 8px 0 !important;
		padding: 0 !important;
		break-after: avoid-page !important;
		page-break-after: avoid !important;
	}

	#step4 .mb-16 > .flex.items-center.justify-center > div {
		flex: 1 1 auto !important;
		height: 1px !important;
		background: linear-gradient(90deg, transparent 0%, #e8d7bb 50%, transparent 100%) !important;
	}

	#step4 .mb-16 > .flex.items-center.justify-center h3 {
		margin: 0 !important;
		font-size: 11.5pt !important;
		font-weight: 900 !important;
		line-height: 1.1 !important;
		letter-spacing: -0.01em !important;
		color: var(--print-ink) !important;
	}

	#step4 .mb-16 > .flex.items-center.justify-center h3::before {
		content: none;
		display: block !important;
		margin: 0 0 2px 0 !important;
		font-size: 6.8pt !important;
		font-weight: 800 !important;
		letter-spacing: 0.18em !important;
		text-transform: uppercase !important;
		color: var(--print-accent) !important;
	}

	.nutrition-section .grid,
	.hydration-section .grid {
		display: block !important;
	}

	.nutrition-section .grid > a,
	.hydration-section .grid > a {
		display: block !important;
		margin: 0 0 9px 0 !important;
		page-break-inside: avoid !important;
		break-inside: avoid-page !important;
	}

	.nutrition-section .grid > a:last-child,
	.hydration-section .grid > a:last-child {
		margin-bottom: 0 !important;
	}

	.nutri-card,
	.water-card {
		position: relative !important;
		overflow: hidden !important;
		margin: 0 !important;
		padding: 9px 10px !important;
		border: 1px solid var(--print-border) !important;
		border-radius: 18px !important;
		background: linear-gradient(180deg, #fffefb 0%, #faf6ee 100%) !important;
		page-break-inside: avoid !important;
		break-inside: avoid-page !important;
	}

	.nutri-card::before,
	.water-card::before {
		content: "";
		position: absolute !important;
		left: 0 !important;
		right: 0 !important;
		top: 0 !important;
		height: 3px !important;
		border-radius: 18px 18px 0 0 !important;
		background: linear-gradient(90deg, #15803d 0%, #4ade80 100%) !important;
	}

	.water-card::before {
		background: linear-gradient(90deg, #1d4ed8 0%, #60a5fa 100%) !important;
	}

	.nutri-card i,
	.water-card i,
	.group-hover\:opacity-100,
	.opacity-0 {
		display: none !important;
	}

	.nutri-card > div:first-child,
	.water-card > div:first-child {
		display: none !important;
	}

	.nutri-card h4,
	.water-card h4 {
		margin: 0 0 2px 0 !important;
		font-size: 10.4pt !important;
		font-weight: 900 !important;
		line-height: 1.1 !important;
		color: var(--print-ink) !important;
	}

	.nutri-card p,
	.water-card p {
		margin: 0 0 3px 0 !important;
		font-size: 8.1pt !important;
		line-height: 1.28 !important;
		color: #4b5563 !important;
	}

	.nutri-card .mt-4,
	.water-card .mt-4 {
		margin-top: 6px !important;
		padding-top: 6px !important;
		border-top: 1px dashed #ddcfb8 !important;
	}

	.nutri-card .space-y-2 > * + *,
	.water-card .space-y-2 > * + * {
		margin-top: 3px !important;
	}

	.nutri-card .rounded-lg,
	.water-card .rounded-lg {
		padding: 5px 7px !important;
		border: 1px solid #ece0ce !important;
		background: #fffdfa !important;
	}

	.nutri-card .text-lg,
	.water-card .text-lg {
		font-size: 9.6pt !important;
		font-weight: 800 !important;
		line-height: 1.15 !important;
	}

	.nutri-card .text-xs,
	.water-card .text-xs {
		font-size: 7.3pt !important;
		line-height: 1.22 !important;
	}

	.text-white,
	.text-gray-300,
	.text-gray-400,
	.text-blue-300,
	.text-green-300,
	.text-yellow-300,
	.text-orange-300 {
		color: var(--print-ink) !important;
	}

	.text-gold-400,
	.text-amber-400 {
		color: var(--print-accent) !important;
	}

	.text-green-400 {
		color: var(--print-success) !important;
	}

	.text-blue-400 {
		color: var(--print-info) !important;
	}

	.text-yellow-400 {
		color: #a16207 !important;
	}

	.text-orange-400 {
		color: #c2410c !important;
	}

	.mb-16:has(a[data-line-cta]) {
		display: none !important;
	}

	.print-footer {
		margin-top: 14px !important;
		padding-top: 10px !important;
		border-top: 1px solid #e7d6b7 !important;
	}

	.print-powered-by {
		text-align: center !important;
		font-size: 9.4pt !important;
		font-weight: 900 !important;
		letter-spacing: 0.22em !important;
		color: #7c2d12 !important;
	}

	h2,
	h3,
	.print-header,
	.print-section-heading,
	.exercise-card,
	.nutri-card,
	.water-card,
	.nutrition-section .grid > a,
	.hydration-section .grid > a,
	#printContactSection,
	#personalInfoSummary,
	#workoutSummary {
		page-break-inside: avoid !important;
		break-inside: avoid-page !important;
	}
}