body { font-family: 'Inter', -apple-system, sans-serif; display: flex; justify-content: center; align-items: center; min-height: 100vh; min-height: 100dvh; margin: 0; padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0); background: hsl(220, 10%, 9%); color: hsl(0, 0%, 93%); }
.card { background: hsl(220, 8%, 13%); padding: 2rem; border-radius: 12px; box-shadow: 0 20px 25px -5px rgba(0,0,0,.45); width: 340px; max-width: calc(100vw - 2rem); border: 1px solid rgba(255,255,255,.08); }
h2 { margin-top: 0; font-weight: 600; font-size: 1.25rem; }
.subtitle { color: hsl(0, 0%, 48%); font-size: .8rem; margin-bottom: 1.2rem; }
input { width: 100%; padding: .55rem .7rem; margin: .35rem 0; box-sizing: border-box; border: 1px solid rgba(255,255,255,.08); border-radius: 6px; background: hsl(220, 10%, 9%); color: hsl(0, 0%, 93%); font-family: inherit; font-size: 16px; transition: border-color .15s; -webkit-appearance: none; }
input:focus { outline: none; border-color: hsl(210, 40%, 48%); box-shadow: 0 0 0 3px hsla(210, 40%, 48%, .2); }
button { width: 100%; padding: .6rem; background: linear-gradient(135deg, hsl(210, 40%, 48%), hsl(200, 30%, 55%)); color: #fff; border: none; border-radius: 6px; cursor: pointer; font-size: .9rem; font-family: inherit; font-weight: 500; margin-top: .7rem; transition: box-shadow .15s; -webkit-appearance: none; min-height: 44px; }
button:hover { box-shadow: 0 0 20px hsla(210, 40%, 48%, .4); }
button:active { transform: scale(.98); }
.error { color: hsl(0, 65%, 55%); font-size: .85rem; }
.success { color: hsl(140, 50%, 55%); font-size: .85rem; }
a { color: hsl(0, 0%, 55%); text-decoration: none; }
a:hover { color: hsl(0, 0%, 80%); text-decoration: underline; }
.footer-link { margin-top: 1rem; font-size: .75rem; text-align: center; }

@media (max-width: 400px) {
  .card { border-radius: 0; border: none; box-shadow: none; width: 100%; max-width: 100vw; padding: 2rem 1.5rem; }
  body { align-items: flex-start; padding-top: max(env(safe-area-inset-top, 0px), 3rem); }
}