* { box-sizing: border-box; margin: 0; }
body {
  background: #0a0a0a; color: #fafafa;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
}
.wrap { max-width: 460px; padding: 32px 20px; text-align: center; }
.shield { font-size: 48px; margin-bottom: 12px; }
h1 { font-size: 22px; font-weight: 650; margin-bottom: 16px; }
.muted { color: #a1a1aa; font-size: 14px; }
.small { font-size: 12px; margin-top: 10px; }
.key-box {
  background: #161616; border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px; padding: 14px; margin: 10px 0;
  font-family: ui-monospace, Menlo, monospace; font-size: 14px;
  word-break: break-all; color: #818cf8;
}
.btn {
  appearance: none; border: 1px solid rgba(255,255,255,.12); background: #6366f1;
  color: #fff; font-size: 14px; font-weight: 500; padding: 8px 18px;
  border-radius: 6px; cursor: pointer;
}
.btn:hover { background: #4f46e5; }
.ok { color: #22c55e; font-size: 14px; margin-top: 12px; }
.spinner {
  width: 22px; height: 22px; margin: 14px auto 0;
  border: 3px solid rgba(255,255,255,.15); border-top-color: #6366f1;
  border-radius: 50%; animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.foot { margin-top: 32px; font-size: 12px; }
a { color: #818cf8; }
[hidden] { display: none !important; }