:root {
	--azul: #2f6bff;
	--verde: #0fb5ae;
	--ambar: #ffc53d;
	--texto: #1d2433;
	--discreto: #5d6679;
	--fundo: #f4f6fb;
	--cartao: #ffffff;
	--borda: #dde2ee;
	--erro: #b42318;
	--ok: #067647;
	color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
	:root {
		--texto: #e7ebf3;
		--discreto: #9aa3b5;
		--fundo: #11151d;
		--cartao: #1a202b;
		--borda: #2c3443;
		--erro: #f97066;
		--ok: #47cd89;
	}
}

* { box-sizing: border-box; }

body {
	margin: 0;
	font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	color: var(--texto);
	background: var(--fundo);
}

a { color: var(--azul); }

.topo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 24px;
	background: linear-gradient(135deg, var(--azul), var(--verde));
}

.topo a, .topo .link { color: #fff; text-decoration: none; font-weight: 600; }
.marca { display: flex; align-items: center; gap: 10px; font-size: 18px; }
.topo nav { display: flex; align-items: center; gap: 18px; }
.topo form.sair { margin: 0; }

main { max-width: 980px; margin: 0 auto; padding: 32px 16px 48px; }

footer { text-align: center; color: var(--discreto); font-size: 13px; padding: 24px 16px; }

h1 { font-size: 30px; line-height: 1.2; margin: 0 0 16px; }
h2 { font-size: 20px; margin: 0 0 12px; }

.destaque { padding: 24px 0 8px; }
.destaque h1 { font-size: 38px; max-width: 720px; }
.destaque p { max-width: 720px; }

.cartao {
	background: var(--cartao);
	border: 1px solid var(--borda);
	border-radius: 12px;
	padding: 24px;
	margin: 0 0 20px;
}

.estreito { max-width: 460px; margin-left: auto; margin-right: auto; }

label { display: block; margin: 0 0 14px; font-weight: 600; font-size: 14px; }
label small { display: block; font-weight: 400; color: var(--discreto); }

input, select {
	display: block;
	width: 100%;
	margin-top: 6px;
	padding: 10px 12px;
	font: inherit;
	color: var(--texto);
	background: var(--fundo);
	border: 1px solid var(--borda);
	border-radius: 8px;
}

.em-linha { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.em-linha input, .em-linha select { width: auto; flex: 1 1 160px; margin: 0; }

.botao {
	display: inline-block;
	padding: 10px 18px;
	font: inherit;
	font-weight: 600;
	color: #fff;
	background: var(--azul);
	border: 0;
	border-radius: 8px;
	text-decoration: none;
	cursor: pointer;
}

.botao.secundario { background: transparent; color: var(--azul); border: 1px solid var(--azul); }

button.link { background: none; border: 0; padding: 0; font: inherit; color: var(--azul); cursor: pointer; }

.alerta { padding: 10px 14px; border-radius: 8px; border: 1px solid; }
.alerta.erro { color: var(--erro); border-color: var(--erro); }
.alerta.ok { color: var(--ok); border-color: var(--ok); }

.discreto { color: var(--discreto); font-size: 14px; }
.etiqueta { font-size: 12px; padding: 2px 8px; border-radius: 99px; background: var(--fundo); border: 1px solid var(--borda); }

table { width: 100%; border-collapse: collapse; }
td, th { text-align: left; padding: 10px 8px; border-top: 1px solid var(--borda); vertical-align: top; }
td.acoes { text-align: right; white-space: nowrap; }
td.acoes form { display: inline; margin-left: 12px; }

.planos { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.plano { background: var(--cartao); border: 1px solid var(--borda); border-radius: 12px; padding: 24px; }
.plano.atual { border-color: var(--verde); box-shadow: 0 0 0 2px var(--verde) inset; }
.plano .preco { font-size: 22px; font-weight: 700; margin: 0; }
.plano ul { padding-left: 20px; }

.downloads { list-style: none; padding: 0; }
.downloads li { padding: 6px 0; }

.copiar { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; }