:root {
  --roxo: #4A4BA6; --roxo-esc: #36378a; --roxo-claro: #ecebfa; --tinta: #1f1d3d; --suave: #5b5a78; --linha: #dcdaf0;
  --fundo: #f4f3fb; --branco: #fff; --coral: #E8403A; --verde: #1f9d6b; --amarelo: #f6c445; --raio: 14px;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: 'Noto Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; color: var(--tinta); background: var(--fundo); font-size: 16px; line-height: 1.5; }
a { color: var(--roxo); }
button, input, select, textarea { font: inherit; color: inherit; }
.tela { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; background: radial-gradient(1200px 500px at 50% -10%, #d9d8f6 0, transparent 60%), var(--fundo); }
.cartao { width: 100%; max-width: 420px; background: var(--branco); border-radius: 20px; box-shadow: 0 12px 40px rgba(54, 55, 138, .12); padding: 32px 28px; }
.logo { display: block; width: 120px; margin: 0 auto 8px; }
.marca-sub { text-align: center; color: var(--suave); font-size: 14px; margin: 0 0 22px; letter-spacing: .02em; }
h1 { font-size: 22px; line-height: 1.3; margin: 0 0 6px; }
.cartao p { margin: 0 0 16px; }
label { display: block; font-weight: 700; font-size: 14px; margin: 14px 0 6px; }
input[type=email], input[type=password], input[type=text], input[type=date], input[type=number], select, textarea {
  width: 100%; padding: 12px 14px; border: 1.5px solid var(--linha); border-radius: 10px; background: #fff; outline: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--roxo); box-shadow: 0 0 0 3px var(--roxo-claro); }
.botao { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 10px; padding: 12px 20px; font-weight: 700; cursor: pointer; background: var(--roxo); color: #fff; text-decoration: none; }
.botao:hover { background: var(--roxo-esc); }
.botao[disabled] { opacity: .6; cursor: default; }
.botao.cheio { width: 100%; margin-top: 20px; }
.botao.claro { background: var(--roxo-claro); color: var(--roxo-esc); }
.botao.claro:hover { background: #dedcf6; }
.botao.perigo { background: #fde8e7; color: #b42a24; }
.botao.perigo:hover { background: #fbd4d2; }
.botao.pequeno { padding: 7px 12px; font-size: 14px; border-radius: 8px; }
.aviso { padding: 12px 14px; border-radius: 10px; font-size: 14px; margin: 14px 0 0; }
.aviso.erro { background: #fde8e7; color: #9f241f; }
.aviso.ok { background: #e3f6ee; color: #146b49; }
.aviso.info { background: var(--roxo-claro); color: var(--roxo-esc); }
.rodape-links { display: flex; justify-content: space-between; gap: 12px; margin-top: 18px; font-size: 14px; flex-wrap: wrap; }
.oculto { display: none !important; }
.senha-campo { position: relative; }
.senha-campo button { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); border: 0; background: none; color: var(--roxo); font-size: 13px; font-weight: 700; cursor: pointer; padding: 6px; }
.plataformas { display: grid; gap: 12px; margin-top: 18px; }
.plat { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border: 1.5px solid var(--linha); border-radius: var(--raio); text-decoration: none; color: inherit; background: #fff; }
.plat:hover { border-color: var(--roxo); background: #faf9ff; }
.plat strong { display: block; }
.plat small { color: var(--suave); }
.plat .seta { color: var(--roxo); font-size: 22px; }