:root {
	--bg: #161B22;
	--panel: #21262D;
	--border: #30363D;
	--text: #E6EDF3;
	--muted: #8B949E;
	--code: #3BC9DB;
	--danger: #E03130;
}

*,*::before,*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html,body {
	height: 100%;
}

body {
	background: var(--bg);
	font-family: Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
	color: var(--text);
	display: flex;
	align-items: center;
	justify-content: center;
}

.glow {
	display: none;
}

main {
	width: 100%;
	max-width: 520px;
	padding: 24px;
}

.card {
	background: var(--panel);
	border: 1px solid var(--border);
	border-radius: 12px;
	padding: 44px 38px;
	text-align: center;
}

.code {
	font-size: 110px;
	font-weight: 700;
	letter-spacing: 2px;
	color: var(--code);
}

.title {
	font-size: 26px;
	font-weight: 600;
	margin: 14px 0 10px;
}

.text {
	font-size: 15px;
	line-height: 1.7;
	color: var(--muted);
	max-width: 420px;
	margin: auto;
}

.badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 26px;
	padding: 6px 14px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	color: var(--danger);
	border: 1px solid var(--danger);
	background: transparent;
}

.badge::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--danger);
}

@media (max-width:480px) {
	.card {
		padding: 32px 24px;
	}

	.code {
		font-size: 80px;
	}

	.title {
		font-size: 22px;
	}

	.text {
		font-size: 14px;
	}
}