* {
	margin: 0; /* Remove a margem padrão de todos os elementos. */
	padding: 0; /* Remove o espaçamento interno padrão de todos os elementos. */
	box-sizing: border-box; /* Inclui borda e padding no cálculo de largura e altura. */
}

:root {
	--bg-color: #141414;
	--text-color: #ffffff;
	--text-muted: #808080;
	--card-hover-border: #ffffff;
	--card-hover-shadow: rgba(0, 0, 0, 0.45);
	--toggle-bg: #2a2a2a;
	--toggle-border: #454545;
	--toggle-knob: #f5f5f5;
	--toggle-active: #ffffff; /* Esse é o hover do Sol */
	--toggle-icon-light: #ffd35a;
	--toggle-icon-dark: #fff7cc;
}

body.light-theme {
	--bg-color: #f2f4f7;
	--text-color: #181818;
	--text-muted: #5f6368;
	--card-hover-border: #181818;
	--card-hover-shadow: rgba(31, 41, 55, 0.25);
	--toggle-bg: #ffffff;
	--toggle-border: #c9ced6;
	--toggle-knob: #101010;
	--toggle-active: #66a6e6; /* Cor do botão da lua */
	--toggle-icon-light: #d89b00;
	--toggle-icon-dark: #ffffff;
}

body {
	min-height: 100vh; /* Garante altura mínima igual à altura da viewport. */
	font-family: Arial, Helvetica, sans-serif; /* Define a família tipográfica principal da página. */
	background-color: var(--bg-color); /* Aplica a cor de fundo conforme o tema ativo. */
	color: var(--text-color); /* Define a cor base dos textos conforme o tema ativo. */
	transition: background-color 0.25s ease, color 0.25s ease;
}

main {
	min-height: 100vh; /* Faz a área principal ocupar ao menos toda a tela. */
	display: flex; /* Ativa Flexbox para controlar alinhamento dos filhos. */
	flex-direction: column; /* Empilha os elementos em coluna. */
	align-items: center; /* Centraliza os itens horizontalmente. */
	justify-content: center; /* Centraliza os itens verticalmente. */
	padding: 2rem 1rem; /* Adiciona respiro interno vertical e horizontal. */
	position: relative;
}

.theme-toggle {
	position: absolute;
	top: 1rem;
	right: 1rem;
	width: 48px;
	height: 48px;
	padding: 0;
	border-radius: 50%;
	border: 1px solid var(--toggle-border);
	background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.18), transparent 60%), var(--toggle-bg);
	cursor: pointer;
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
		background 0.45s cubic-bezier(0.22, 1, 0.36, 1),
		border-color 0.35s ease,
		box-shadow 0.35s ease,
		color 0.35s ease;
	appearance: none;
	-webkit-appearance: none;
	color: var(--toggle-icon-light);
	display: grid;
	place-items: center;
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
}

.theme-toggle:hover {
	transform: none;
	background-color: var(--toggle-active);
}

.theme-toggle:active {
	transform: none;
}

.theme-toggle::before {
	content: "☀";
	display: block;
	font-size: 2rem;
	line-height: 1;
	transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
		color 0.35s ease,
		text-shadow 0.35s ease,
		opacity 0.35s ease;
	text-shadow: 0 0 10px rgba(255, 211, 90, 0.7);
	transform: scale(1);
}

.theme-toggle[aria-pressed="true"] {
	background-color: var(--toggle-active);
	color: var(--toggle-icon-dark);
	box-shadow: 0 12px 26px rgba(0, 0, 0, 0.36), 0 0 0 1px rgba(255, 255, 255, 0.14) inset;
}

.theme-toggle[aria-pressed="true"]::before {
	content: "☾";
	transform: scale(1.15);
	text-shadow: 0 0 14px rgba(255, 247, 204, 0.95);
}

/* ADICIONE AQUI NO FINAL DAS REGRAS DO BOTÃO */
.theme-toggle[aria-pressed="true"]:hover {
    background-color: #113bc4; /* Fundo preto no hover da Lua */
    color: #ffffff;            /* Ícone branco para contrastar */
}

header h1 {
	font-size: clamp(1.8rem, 2.8vw, 3rem); /* Define tamanho fluido entre mínimo e máximo. */
	font-weight: 700; /* Deixa o título com peso de fonte forte (negrito). */
	margin-bottom: 2.5rem; /* Cria espaço abaixo do título. */
	text-align: center; /* Centraliza o texto do cabeçalho. */
}

section {
	width: 100%; /* Faz a seção ocupar toda a largura disponível. */
}

.profiles {
	list-style: none; /* Remove marcadores padrão da lista. */
	display: flex; /* Organiza os perfis com Flexbox. */
	justify-content: center; /* Centraliza os cards na horizontal. */
	align-items: flex-start; /* Alinha os cards pelo topo. */
	gap: 2rem; /* Define espaçamento entre os cards de perfil. */
	flex-wrap: wrap; /* Permite quebra de linha em telas menores. */
}

.profile {
	display: flex; /* Ativa Flexbox no card de perfil. */
	flex-direction: column; /* Coloca imagem e nome em coluna. */
	align-items: center; /* Centraliza o conteúdo do card. */
	gap: 0.75rem; /* Define distância entre imagem e texto. */
}

.profile img {
	width: 200px; /* Define largura fixa da imagem do perfil. */
	height: 200px; /* Define altura fixa da imagem do perfil. */
	object-fit: cover; /* Preenche o quadro sem distorcer, cortando o excesso. */
	border-radius: 6px; /* Arredonda levemente os cantos da imagem. */
	border: 3px solid transparent; /* Reserva espaço de borda sem aparecer no estado normal. */
	transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; /* Suaviza animações de hover. */
	cursor: pointer; /* Mostra cursor de clique ao passar o mouse. */
}

.profile p {
	color: var(--text-muted); /* Usa tom secundário conforme o tema. */
	font-size: 1.1rem; /* Define tamanho do texto do nome. */
	transition: color 0.25s ease; /* Suaviza a mudança de cor no hover. */
}

.profile:hover img {
	transform: scale(1.05); /* Aumenta levemente a imagem ao passar o mouse. */
	border-color: var(--card-hover-border); /* Torna a borda visível conforme o tema. */
	box-shadow: 0 12px 28px var(--card-hover-shadow); /* Adiciona sombra para destaque visual. */
}

.profile:hover p {
	color: var(--text-color); /* Destaca o nome conforme a cor principal do tema. */
}

@media (max-width: 360px) {
	main {
		padding: 1.25rem 0.75rem; /* Reduz o padding para telas muito pequenas. */
	}

	header h1 {
		font-size: 1.35rem; /* Diminui o título para evitar quebra excessiva. */
		margin-bottom: 1.25rem; /* Reduz o espaço abaixo do título. */
	}

	.profiles {
		gap: 0.9rem; /* Aproxima os cards para caber melhor no espaço reduzido. */
	}

	.profile img {
		width: 105px; /* Ajusta a largura da imagem para celulares compactos. */
		height: 105px; /* Ajusta a altura da imagem para celulares compactos. */
	}

	.profile p {
		font-size: 0.9rem; /* Diminui o texto para manter proporção no micro mobile. */
	}
}

@media (max-width: 480px) {
	main {
		padding: 1.5rem 1rem; /* Ajusta o respiro interno no mobile comum. */
	}

	header h1 {
		font-size: 1.6rem; /* Reduz o título para telas pequenas. */
		margin-bottom: 1.5rem; /* Diminui espaço inferior do cabeçalho. */
	}

	.profiles {
		gap: 1.25rem; /* Reduz o espaçamento entre perfis no mobile. */
	}

	.profile img {
		width: 130px; /* Diminui a largura da imagem em telas pequenas. */
		height: 130px; /* Diminui a altura da imagem em telas pequenas. */
	}

	.profile p {
		font-size: 1rem; /* Ajusta o tamanho do texto para melhor leitura no mobile. */
	}
}

@media (min-width: 481px) and (max-width: 768px) {
	main {
		padding: 2rem 1.25rem; /* Define padding confortável para tablets pequenos. */
	}

	header h1 {
		font-size: 2rem; /* Aumenta o título em relação ao mobile. */
		margin-bottom: 2rem; /* Ajusta distância entre título e perfis. */
	}

	.profiles {
		gap: 1.5rem; /* Ajusta espaçamento entre cards no tablet. */
	}

	.profile img {
		width: 160px; /* Define dimensão intermediária para imagens no tablet. */
		height: 160px; /* Define dimensão intermediária para imagens no tablet. */
	}

	.profile p {
		font-size: 1rem; /* Mantém leitura confortável sem exagerar no tamanho. */
	}
}

@media (min-width: 769px) and (max-width: 1024px) {
	main {
		padding: 2.5rem 1.5rem; /* Aumenta o respiro em notebooks compactos. */
	}

	header h1 {
		font-size: 2.4rem; /* Escala o título para telas médias/grandes. */
	}

	.profiles {
		gap: 1.75rem; /* Ajusta separação dos perfis para esta faixa. */
	}

	.profile img {
		width: 185px; /* Aproxima tamanho da imagem ao desktop sem ocupar demais. */
		height: 185px; /* Aproxima tamanho da imagem ao desktop sem ocupar demais. */
	}
}

@media (min-width: 1280px) {
	main {
		padding: 3rem 2rem; /* Amplia margens internas em telas grandes. */
	}

	header h1 {
		font-size: 3.1rem; /* Destaca mais o título em monitores amplos. */
		margin-bottom: 3rem; /* Cria respiro maior entre título e perfis. */
	}

	.profiles {
		gap: 2.5rem; /* Aumenta distância entre cards em telas largas. */
	}

	.profile img {
		width: 220px; /* Expande imagens para aproveitar melhor o espaço. */
		height: 220px; /* Expande imagens para aproveitar melhor o espaço. */
	}

	.profile p {
		font-size: 1.15rem; /* Ajusta o texto proporcionalmente ao aumento visual. */
	}
}

/* Manage profiles button (below the profile list) */
.manage-profiles-container {
	display: flex;
	justify-content: center;
	margin-top: 2rem;
}

.manage-profiles-btn {
	display: inline-block;
	min-width: 260px;
	padding: 0.9rem 2.2rem;
	border-radius: 2px;
	background: transparent;
	color: var(--text-muted);
	border: 1px solid rgba(255,255,255,0.12);
	font-weight: 700;
	font-size: 1rem;
	letter-spacing: 2px;
	text-transform: none;
	text-align: center;
	cursor: pointer;
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.08s ease;
	box-shadow: none;
}

.manage-profiles-btn:hover {
	color: var(--text-color);
	border-color: rgba(255,255,255,0.18);
	background: rgba(255,255,255,0.03);
	transform: translateY(-2px);
}

.manage-profiles-btn:active {
	transform: translateY(0);
}

@media (max-width: 480px) {
	.manage-profiles-container { margin-top: 1rem; }
	.manage-profiles-btn { padding: 0.5rem 0.9rem; font-size: 0.95rem; }
}