* { box-sizing: border-box; margin: 0; font-family: 'Segoe UI', system-ui, Arial, sans-serif; }
.hidden { display: none !important; }

#wrapper {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 40%, rgba(99, 102, 241, .18), rgba(0, 0, 0, .65));
}

.modal {
  width: min(92vw, 420px);
  padding: 28px 26px 22px;
  text-align: center;
  color: #e2e8f0;
  background: linear-gradient(180deg, #161923, #0c0e14);
  border: 1px solid #2a2f3d;
  border-radius: 16px;
  box-shadow: 0 30px 80px -20px rgba(99, 102, 241, .55);
  animation: pop .25s ease-out;
}
@keyframes pop { from { opacity: 0; transform: scale(.94) translateY(10px); } to { opacity: 1; transform: none; } }

.icon { font-size: 40px; margin-bottom: 6px; }
h1 { font-size: 21px; font-weight: 800; letter-spacing: .3px; margin-bottom: 6px; }
p { font-size: 14px; color: #94a3b8; margin-bottom: 16px; }

input {
  width: 100%; padding: 14px;
  background: #0a0c11; color: #fff;
  border: 1px solid #333a4a; border-radius: 12px; outline: none;
  font-size: 22px; font-weight: 800; letter-spacing: 6px; text-align: center; text-transform: uppercase;
  transition: border-color .2s, box-shadow .2s;
}
input:focus { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99, 102, 241, .25); }

.buttons { display: flex; gap: 10px; margin-top: 16px; }
button {
  flex: 1; padding: 12px; border: 0; border-radius: 10px; cursor: pointer;
  font-weight: 700; font-size: 14px; color: #fff;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  transition: transform .15s, filter .15s;
}
button:hover { filter: brightness(1.1); transform: translateY(-1px); }
button.ghost { background: #252a36; }

.result { min-height: 22px; margin-top: 14px; font-size: 14px; line-height: 1.5; color: #86efac; white-space: pre-wrap; }
.result.error { color: #fca5a5; }