body{margin:0;padding:0;min-height:100vh;background:none}html{height:100%}.container{display:flex;justify-content:center;align-items:center;min-height:100vh;background:linear-gradient(135deg,#1a1a2e,#3d0f5f,#7f00ff,#f0f,indigo);font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;padding:2rem;box-sizing:border-box;text-align:center}.card{background-color:#fff;padding:3rem 4rem;border-radius:16px;box-shadow:0 15px 40px #00000040;display:flex;flex-direction:column;align-items:center;min-width:320px;max-width:400px}#otp-title{font-size:2rem;font-weight:700;text-align:center;background:linear-gradient(270deg,#3d0f5f,#7f00ff,#bf00ff,#f0f,#1a1a2e);background-size:600% 600%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:lavaLamp 30s ease infinite}@keyframes lavaLamp{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}#otp-display{font-size:2.5rem;margin-bottom:1.2rem;letter-spacing:.25rem;color:#111;font-weight:600;text-align:center;width:fit-content;transition:all .3s ease;text-shadow:0 0 5px #ff00ff,0 0 10px #e600ff,0 0 20px #ff00ff;position:relative}#otp-display.clickable{cursor:pointer}#otp-display.copied:after{content:"Copied!";position:absolute;top:-1.5rem;right:50%;transform:translate(50%);font-size:.8rem;font-weight:600;color:#ff3ec7;text-shadow:0 0 5px #ff3ec7,0 0 10px #ff00ff;opacity:1;animation:fadeOut 5s forwards}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}#otp-timer{font-size:1.2rem;margin-bottom:1.5rem;font-weight:500;color:#f0f;opacity:.85;text-align:center}#otp-timer.expired{color:#ff3ec7;font-weight:600}#generate-otp-button{padding:.8rem 1.5rem;font-size:1.4rem;font-weight:700;background-color:#bf00ff;color:#fff;border:none;border-radius:12px;cursor:pointer;width:fit-content;min-width:200px;text-align:center;box-shadow:0 0 12px #bf00ff99;transition:all .3s ease}#generate-otp-button:hover:not(:disabled){background-color:#e600ff;box-shadow:0 0 20px #e600ffb3,0 0 40px #bf00ff80;transform:translateY(-2px)}#generate-otp-button:active:not(:disabled){transform:translateY(1px)}#generate-otp-button:disabled{background-color:#ccc;box-shadow:none}#otp-display,#otp-timer{transition:all .3s ease-in-out}@media(max-width:400px){.card{padding:2rem 2.5rem}#otp-title{font-size:1.8rem}#otp-display{font-size:2rem}#generate-otp-button{font-size:1.2rem;min-width:160px}}