body { display: grid; place-items: center; min-height: 100vh; padding: 16px; overflow: hidden; }
#stars { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; }
.card {
  position: relative; z-index: 1; width: min(420px, 100%); padding: 2rem 1.75rem; border-radius: 20px;
  background: var(--panel); border: 1px solid var(--line); backdrop-filter: blur(14px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .04);
}
.brand { text-align: center; margin-bottom: 1.5rem; }
.brand h1 { font-family: var(--pixel); font-weight: 400; font-size: 2rem; margin: .4rem 0 .2rem; letter-spacing: .08em; }
.brand p { margin: 0; color: var(--ink-2); }
form { display: grid; gap: 1.1rem; }
.btn.primary { padding: .9rem; font-size: 1.05rem; }
.shake { animation: shake .4s; }
@keyframes shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
@media (max-width: 380px) { .pin-row input { width: 2.5rem; height: 3.2rem; font-size: 1.3rem; } .pin-row { gap: 6px; } }