*{box-sizing:border-box}
body{margin:0;padding:0;background:#0d0d0d;font-family:'Poppins',sans-serif;color:#fff;text-align:center;overflow-x:hidden}
.page{display:none}
.active{display:block}
.container{width:92%;max-width:420px;margin:auto;padding-top:30px}
img.logo{width:160px;margin-bottom:15px;border-radius:12px}
.shake{animation:shakeAnim .25s}
@keyframes shakeAnim{0%{transform:translateX(0)}25%{transform:translateX(-4px)}50%{transform:translateX(4px)}75%{transform:translateX(-4px)}100%{transform:translateX(0)}}
#idError{color:#ff4444;font-weight:600;margin-top:6px;min-height:22px}
input{width:100%;padding:13px;border-radius:10px;border:2px solid #222;background:#1f1f1f;color:#fff;font-size:16px;margin-top:10px;outline:none}
#confirmBtn{width:100%;margin-top:10px;padding:10px;border-radius:10px;font-weight:700;background:linear-gradient(90deg,#ffcc00,#ff9900);border:none;cursor:pointer;font-size:17px;color:#000}
.gems-box{background:#1e1e1e;padding:15px;border-radius:15px;margin-top:12px;cursor:pointer;border:2px solid transparent;display:flex;align-items:center;justify-content:space-between;transition:.25s}
.gems-box.selected{border-color:#ffcc00;background:#272727}
button.main{width:100%;padding:14px;margin-top:15px;border-radius:10px;border:none;background:linear-gradient(90deg,#ffcc00,#ff9900);color:#000;font-size:18px;font-weight:700;cursor:pointer}
.loader{width:100%;background:#333;height:12px;border-radius:20px;margin-top:15px;overflow:hidden;display:none}
.loader div{height:100%;width:0;background:#ffcc00;transition:width .05s}
img#chosenImg{
    border-radius:12px;
    box-shadow:0 0 15px rgba(255,204,0,0.5);
}