*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; min-height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: #0b1020; color: #e9eef8;
}
a { color: #4a90e2; text-decoration: none; }
a:hover { text-decoration: underline; }
button {
  appearance: none; border: 0; padding: 0.7rem 1.1rem; border-radius: 8px;
  background: #4a90e2; color: white; font-size: 1rem; cursor: pointer;
}
button:disabled { opacity: 0.6; cursor: not-allowed; }
.card {
  max-width: 520px; margin: 2rem auto; padding: 1.5rem;
  background: #121934; border-radius: 12px; box-shadow: 0 10px 40px rgba(0,0,0,.4);
}
.muted { color: #8a95b5; font-size: 0.9rem; }
.code {
  font-family: "SF Mono", Menlo, Monaco, monospace; font-size: 2rem;
  letter-spacing: 0.4rem; text-align: center;
  background: #0a0f22; padding: 0.8rem; border-radius: 8px;
}
input[type=text] {
  width: 100%; padding: 0.8rem; font-size: 1.1rem; border-radius: 8px;
  border: 1px solid #2a3358; background: #0a0f22; color: white;
  text-transform: uppercase; letter-spacing: 0.3rem; text-align: center;
}
.row { display: flex; gap: 0.6rem; align-items: center; }
.error { color: #ff7a90; margin-top: 0.6rem; }
.ok { color: #7ee0a1; margin-top: 0.6rem; }