* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 16px;
  background: #0a0a0b;
  color: #f6f3ee;
  font: 16px/1.45 "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
}

.cartao { width: 100%; max-width: 420px; background: #17181b; border: 1px solid #2a2c31; border-top: 3px solid #ff7a1a; border-radius: 18px; padding: 28px 24px; }

.marca { display: flex; align-items: center; gap: 10px; font-weight: 900; font-size: 20px; line-height: 1; text-transform: uppercase; }

.marca small { display: block; color: #ff7a1a; font-size: 11px; font-weight: 700; margin-top: 3px; }

.marca-a { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: #ff7a1a; color: #140a02; font-size: 22px; }

h1 { font-size: 28px; line-height: 1.1; margin: 22px 0 16px; }

label { display: block; font-weight: 600; margin-bottom: 6px; }

input { width: 100%; padding: 14px; font: inherit; color: inherit; background: #0a0a0b; border: 1px solid #3a3c42; border-radius: 10px; }

button { width: 100%; margin-top: 12px; padding: 15px; font: inherit; font-weight: 800; color: #140a02; background: #ff7a1a; border: 0; border-radius: 10px; cursor: pointer; }

button:disabled { opacity: .6; cursor: default; }

input:focus-visible, button:focus-visible, a:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

.mensagem { color: #a5a7ad; font-size: 15px; margin: 14px 0 0; min-height: 1em; }

.mensagem a { color: #ff7a1a; font-weight: 700; }

.aviso { color: #ffb3ac; background: rgba(255, 90, 77, .12); border: 1px solid rgba(255, 90, 77, .45); border-radius: 10px; padding: 10px 12px; margin: 0 0 14px; font-size: 15px; }

[hidden] { display: none; }