@keyframes floatBlob { 0%,100%{ transform: translate(0,0) scale(1);} 50%{ transform: translate(-12px,16px) scale(1.06);} }
@keyframes pulseRing { 0%{ box-shadow:0 0 0 0 rgba(124,58,237,.55);} 100%{ box-shadow:0 0 0 14px rgba(124,58,237,0);} }
@keyframes popIn { from { opacity:0; transform: translateY(14px) scale(.96);} to { opacity:1; transform:translateY(0) scale(1);} }

* { box-sizing: border-box; }
body { margin:0; background:#070512; }
button { font-family: inherit; cursor: pointer; }
button:disabled { opacity: .5; cursor: not-allowed; }
input { font-family: inherit; }
input::placeholder { color: #6b6285; }

.page {
  min-height:100dvh; background:#070512; display:flex; justify-content:center;
  color:#f5f1ff; position:relative; overflow-x:hidden;
}
.blob-a {
  position:absolute; top:-80px; left:-60px; width:260px; height:260px; border-radius:50%;
  background:radial-gradient(circle,#7c3aed,transparent 70%); opacity:.5; filter:blur(10px);
  animation: floatBlob 9s ease-in-out infinite; pointer-events:none;
}
.blob-b {
  position:absolute; bottom:-100px; right:-60px; width:300px; height:300px; border-radius:50%;
  background:radial-gradient(circle,#f43f5e,transparent 70%); opacity:.4; filter:blur(10px);
  animation: floatBlob 11s ease-in-out infinite reverse; pointer-events:none;
}
.shell {
  width:100%; max-width:430px; min-height:100dvh; background:#0f0a1f; position:relative;
  display:flex; flex-direction:column; box-shadow:0 0 60px rgba(0,0,0,.6);
}
.screen { animation: popIn .35s ease; }
.card-flip { transition: transform .6s cubic-bezier(.2,.8,.2,1); transform-style: preserve-3d; }