*{box-sizing:border-box}
html,body{margin:0;padding:0;min-height:100%;font-family:-apple-system,Segoe UI,Roboto,sans-serif;color:#1a1a2e;
background:linear-gradient(-45deg,#667eea,#764ba2,#6B8DD6,#8E37D7);background-size:400% 400%;animation:bg 18s ease infinite}
@keyframes bg{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}
.wrap{max-width:560px;margin:0 auto;padding:36px 16px;min-height:100vh;display:flex;flex-direction:column;justify-content:center}
.card{padding:28px 24px;background:rgba(255,255,255,.97);border-radius:20px;box-shadow:0 14px 50px rgba(0,0,0,.28);
 animation:pop .4s cubic-bezier(.2,.9,.3,1.3)}
@keyframes pop{from{transform:translateY(14px) scale(.97);opacity:0}to{transform:none;opacity:1}}
h1{font-size:26px;margin:0 0 3px;text-align:center;letter-spacing:-.5px}
.sub{font-size:14px;color:#888;text-align:center;margin:0 0 20px}
button{font-family:inherit}
.btn{padding:12px 24px;font-size:15px;font-weight:600;border:0;border-radius:12px;cursor:pointer;color:#fff;
 background:linear-gradient(135deg,#6c3ce0,#8E37D7);box-shadow:0 4px 14px rgba(108,60,224,.4);transition:transform .1s,box-shadow .2s}
.btn:hover{box-shadow:0 6px 20px rgba(108,60,224,.55)}
.btn:active{transform:translateY(1px)}
.hud{display:flex;justify-content:space-between;align-items:center;font-size:14px;color:#555;margin-bottom:12px;font-weight:500}
.pill{background:#efeaff;color:#5a4bd6;padding:5px 12px;border-radius:20px;font-weight:600}