@font-face {
  font-family: "VT323";
  src: url("fonts/VT323_400Regular.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Press Start 2P";
  src: url("fonts/PressStart2P_400Regular.ttf") format("truetype");
  font-display: swap;
}
* { box-sizing: border-box; border-radius: 0; }
html { background: #1a1822; color: #ededf2; }
body { margin: 0; font-family: "VT323", monospace; font-size: 20px; line-height: 1.3; }
/* O texto corrido usa uma coluna de leitura; formulários e cards ficam na largura do app. */
main { max-width: 760px; margin: 0 auto; padding: 24px 16px 48px; }
h1, .brand { font-family: "Press Start 2P", monospace; font-weight: normal; }
h1 { font-size: 16px; line-height: 24px; margin: 24px 0 16px; }
.brand { display: inline-block; font-size: 10px; color: #c084fc; text-decoration: none; }
h2 { font-size: 22.5px; font-weight: normal; margin: 24px 0 4px; }
p, ul { margin: 4px 0 12px; }
section p, li { color: #968eb0; }
li { margin-bottom: 8px; }
strong { color: #ededf2; font-weight: normal; }
a { color: #c084fc; }
.muted { color: #968eb0; }
.links { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 32px; }
form, .card { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; max-width: 448px; }
[hidden] { display: none; }
.card p { margin: 0; }
.card { background: #232031; border: 1px solid #3b3550; padding: 16px; }
label { font-size: 17.5px; color: #968eb0; }
input {
  font: inherit; color: #ededf2; background: #2c2740;
  border: 1px solid #423c5a; padding: 8px 12px;
}
input:focus { outline: 2px solid #c084fc; outline-offset: 0; }
button {
  font: inherit; cursor: pointer; padding: 8px 16px;
  border: 1px solid #c084fc; background: #c084fc; color: #1a1822;
}
button:disabled { opacity: 0.5; cursor: default; }
button.secondary { background: #2c2740; border-color: #3b3550; color: #ededf2; }
button.ghost { background: transparent; border-color: transparent; color: #968eb0; }
button.danger { background: #ff6467; border-color: #ff6467; color: #1a1822; }
.actions { display: flex; gap: 8px; }
.actions button { flex: 1; }
.destructive { color: #ff6467; }
.error { color: #ff6467; border: 1px solid #ff6467; padding: 8px 12px; max-width: 448px; }
@media (min-width: 768px) {
  body { font-size: 22.5px; }
  main { padding: 48px 32px 64px; }
  h1 { font-size: 24px; line-height: 36px; margin: 32px 0 16px; }
  h2 { font-size: 25px; margin-top: 32px; }
  .brand { font-size: 11px; }
}