html, body {
		height: 100%;
		margin: 0;
		padding: 0;
	}

	/* Mobile first */
	body {
		background: #121212;
		color: #fff;
		display: flex;
		flex-direction: column;
		justify-content: flex-start; /* deixa a parte superior acessível */
		align-items: center;
		font-family: "Segoe UI", Arial, sans-serif;
		height: 100vh;
		padding: 20px;
		box-sizing: border-box;
	}
	
	/* 🔹 Cabeçalhos em branco */
	h1, h2, h3, h4, h5, h6 {
		color: #ffffff !important;
	}

	/* 🔹 Labels também ficam brancos */
	label {
		color: #ffffff !important;
	}

	/* Cartão responsivo */
	.card {
		background: #1f1f1f;
		border-radius: 12px;
		padding: 25px;
		width: 100%;
		max-width: 400px;
		margin-top: 40px; /* deixa espaço da barra do navegador no mobile */
	}

	/* Botões */
	.btn-custom {
		border-radius: 8px;
		padding: 12px;
	}

	/* Ajustes de tipografia para telas menores */
	@media (max-width: 480px) {
		h3 {
			font-size: 1.4rem;
		}

		body {
			justify-content: flex-start;
			padding-top: 10vh;
		}

		.card {
			margin-top: 0;
			height: auto;
		}
	}

	/* Telas maiores (tablet e desktop) mantém centro */
	@media (min-width: 768px) {
		body {
			justify-content: center;
		}

		.card {
			margin-top: 0;
		}
	}