:root {
	--bg: #f8f9fa;
	--text: #212529;
	--muted: #6c757d;
	--card-bg: #fff;
	--radius: 12px;
	--shadow: 0 8px 24px rgba(0,0,0,0.08);
}

body {
	background: var(--bg);
	color: var(--text);
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

main {
	max-width: 900px;
	margin-inline: auto;
	padding: 2rem 1rem;
	text-align: center;
	flex: 1;
}

.result-container {
	background: var(--card-bg);
	padding: 2rem;
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	animation: fade-in .35s ease;
}

h1 {
	font-weight: 700;
	font-size: clamp(1.8rem, 2vw + 1rem, 2.4rem);
}

h2 {
	color: var(--muted);
	font-weight: 500;
}

.responsive-img {
	width: 100%;
	max-width: 650px;
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	margin-inline: auto;
}

.loading {
	position: fixed;
	inset: 0;
	background: rgba(248, 249, 250, 0.92);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	transition: opacity .4s ease;
	z-index: 9999;
}

.loading:not(.active) {
	opacity: 0;
	pointer-events: none;
}

@keyframes fade-in {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}