@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap");
*{margin:0;padding:0;box-sizing:border-box;font-family:"Poppins",sans-serif}
body{display:flex;justify-content:center;align-items:center;min-height:100vh;background:#1f293a;color:#fff}
.container{position:relative;width:256px;height:256px;display:flex;justify-content:center;align-items:center}
.container span{position:absolute;left:0;width:32px;height:6px;background:#2c4766;border-radius:8px;transform-origin:128px;transform:scale(2.2) rotate(calc(var(--i)*(360deg/50)));animation:animateBlink 3s linear infinite;animation-delay:calc(var(--i)*(3s/50))}
@keyframes animateBlink{0%{background:#0ef}25%{background:#2c4766}}
.login-box{position:absolute;width:420px}
.login-box form{width:100%;padding:0 50px}
h2{font-size:2em;color:#0ef;text-align:center;margin-bottom:8px}
.sub{opacity:.8;text-align:center;margin-bottom:18px;font-size:.92em}
.input-box{position:relative;margin:18px 0}
.input-box input{width:100%;height:50px;background:transparent;border:2px solid #2c4766;outline:none;border-radius:40px;font-size:1em;color:#fff;padding:0 20px;transition:.5s ease}
.input-box input:focus,.input-box input:valid{border-color:#0ef}
.input-box label{position:absolute;top:50%;left:20px;transform:translateY(-50%);font-size:1em;color:#fff;pointer-events:none;transition:.5s ease}
.input-box input:focus~label,.input-box input:valid~label{top:1px;font-size:.8em;background:#1f293a;padding:0 6px;color:#0ef}
.btn{width:100%;height:45px;background:#0ef;border:none;outline:none;border-radius:40px;cursor:pointer;font-size:1em;color:#1f293a;font-weight:700}
.err{margin-top:12px;text-align:center;color:#ff7b7b;font-size:.9em}
.hint{margin-top:10px;text-align:center;opacity:.7;font-size:.85em}