.qr-page {
	--surface-bg: #f7f2ec;
	--surface-card: #ffffff;
	--surface-input: #eeeae5;
	--accent: #6000A3;
	--accent-subtle: #e7ddff;
	--crisis: #d14300;
	--text-primary: #001909;
	--text-secondary: #394731;
	--text-tertiary: #787a66;
	--text-on-dark: #ffffff;
	--border-default: rgba(0, 25, 9, 0.12);
	--radius-sm: 0.375rem;
	--radius-md: 1rem;
	--radius-lg: 2rem;
	--radius-full: 62.4375rem;
}
.qr-page {
	/*max-width: 30rem;*/
	margin: 0 auto;
	/*min-height: 100vh;*/
	display: none;
	flex-direction: column;
	padding: 0;
}
/* Optical compensation: text elements sit 2rem from edge (1rem page + 1rem inline) */
.qr-page > .label,
.qr-page > .title,
.qr-page > h2,
.qr-page > p,
.qr-page > .prog,
.qr-page > .step-label,
.qr-page > .result-icon,
.qr-page > .result-title,
.qr-page > .icon-box,
.qr-page > .timer-wrap,
.qr-page > .breath-wrap,
.qr-page > .scan-msg,
.qr-page > .slider-wrap {
	padding-inline: 1rem;
}
/* Radius-md buttons sit 1.25rem from edge (1rem page + 0.25rem wrapper) */
button:not(.menu-toggle).qr-btn { margin-inline: 0.25rem; width: calc(100% - 0.5rem); }
.qr-page.active { display: flex; }

.qr-page .label {
	font-size: 0.75rem; font-weight: 600;
	letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--text-tertiary); margin-bottom: 0.5rem;
}
.qr-page .title {
	font-family: 'Nunito', sans-serif;
	font-size: 2.5rem; font-weight: 900;
	color: var(--text-primary); letter-spacing: -0.03em;
	line-height: 0.9; margin-bottom: 1.5rem;
}
.step-label {
	font-size: 0.75rem; font-weight: 600;
	letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--accent); margin-bottom: 0.375rem;
}
.qr-page h2 {
	font-family: 'Nunito', sans-serif;
	font-size: 1.875rem; font-weight: 900; color: var(--text-primary);
	line-height: 0.9; margin-bottom: 0.75rem; letter-spacing: -0.03em;
}
.qr-page p {
	font-size: 1.0625rem; color: var(--text-secondary);
	line-height: 1.5; margin-bottom: 1.25rem; font-weight: 500;
}
.qr-page p strong { color: var(--text-primary); font-weight: 700; }

.spacer { flex: 1; min-height: 1.5rem; }

.prog { display: flex; gap: 0.375rem; margin-bottom: 1.5rem; }
.pdot { height: 0.25rem; flex: 1; border-radius: 0.125rem; background: rgba(0,25,9,0.1); }
.pdot.done { background: var(--accent); }
.pdot.active { background: #b980d9; }

button:not(.menu-toggle).qr-btn {
	display: block; width: 100%;
	padding: 1.25rem 2.5rem;
	border: none; border-radius: var(--radius-md);
	font-family: 'Nunito', sans-serif;
	font-size: 1.375rem; font-weight: 900;
	cursor: pointer; text-align: center;
	margin-bottom: 0.625rem; -webkit-appearance: none;
	letter-spacing: -0.02em; line-height: 0.9;
	transition: background 0.2s, opacity 0.2s;
}
button:not(.menu-toggle).qr-btn:last-child{
	margin-bottom: 0;
}

button:not(.menu-toggle).qr-btn-primary { background: var(--accent); color: var(--text-on-dark); }
button:not(.menu-toggle).qr-btn-primary:hover { background: #7b25d8; }
button:not(.menu-toggle).qr-btn-ghost {
	background: #f2deff; color: var(--accent);
	border: none;
}
button:not(.menu-toggle).qr-btn-ghost:hover { background: #ead0ff; }
button:not(.menu-toggle).qr-btn:active { opacity: 0.75; }
button:not(.menu-toggle).qr-btn.dim { opacity: 0.35; pointer-events: none; }

@media only screen and (min-width: 768px) {
	.qr-page {
		padding: 2rem 1rem 1.5rem;
	}
}