@import "https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap";
.login-page-wrapper{background:#0a0e27;justify-content:center;align-items:center;min-height:100vh;font-family:Poppins,sans-serif;display:flex;overflow:hidden}.login-page-wrapper section{flex-wrap:wrap;justify-content:center;align-items:center;gap:2px;width:100vw;height:100vh;display:flex;position:absolute;overflow:hidden}.login-page-wrapper section:before{content:"";background:linear-gradient(#0a0e27,#00d4ff,#09f,#0a0e27);width:100%;height:100%;animation:6s linear infinite animate;position:absolute}@keyframes animate{0%{transform:translateY(-100%)}to{transform:translateY(100%)}}.login-page-wrapper section span{z-index:2;background:#0f1535;width:calc(6.25vw - 2px);height:calc(6.25vw - 2px);transition:all 1.5s;display:block;position:relative}.login-page-wrapper section span:hover{background:linear-gradient(135deg,#00d4ff,#09f);transition:all}.signin{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:1000;background:#0f1535f2;border:1px solid #00d4ff4d;border-radius:10px;justify-content:center;align-items:center;width:400px;padding:35px;display:flex;position:absolute;box-shadow:0 25px 45px #00000080,0 0 50px #00d4ff33}.content{flex-direction:column;justify-content:center;align-items:center;gap:20px;width:100%;display:flex;position:relative}.content h2{background:linear-gradient(135deg,#00d4ff,#09f);-webkit-text-fill-color:transparent;text-transform:uppercase;letter-spacing:1px;-webkit-background-clip:text;background-clip:text;font-size:1.8em;font-weight:700}.role-display{color:#8fa4d4;text-transform:capitalize;background:#00d4ff1a;border:1px solid #00d4ff33;border-radius:8px;justify-content:center;align-items:center;min-height:20px;padding:8px 16px;font-size:.85em;font-weight:600;display:flex}.form{flex-direction:column;gap:18px;width:100%;display:flex}.inputBox{width:100%;position:relative}.inputBox input{color:#fff;background:#1a2346;border:2px solid #0000;border-radius:12px;outline:none;width:100%;padding:20px 15px 8px;font-size:.95em;font-weight:500;transition:all .3s;position:relative}.inputBox input:focus{background:#1f2952;border:2px solid #00d4ff}.inputBox i{color:#7a8ab8;pointer-events:none;font-size:.95em;font-style:normal;transition:all .3s;position:absolute;top:50%;left:15px;transform:translateY(-50%)}.inputBox input:focus~i,.inputBox input:valid~i{color:#00d4ff;font-size:.75em;font-weight:600;top:12px;transform:translateY(0)}.inputBox input[type=submit]{color:#fff;letter-spacing:1px;cursor:pointer;text-transform:uppercase;background:linear-gradient(135deg,#00d4ff,#09f);border:none;margin-top:5px;padding:12px;font-size:1em;font-weight:700;transition:all .3s;box-shadow:0 10px 25px #00d4ff4d}.inputBox input[type=submit]:hover{transform:translateY(-2px);box-shadow:0 15px 35px #00d4ff66}.inputBox input[type=submit]:disabled{opacity:.6;cursor:not-allowed}input[type=submit]:active{opacity:.9;transform:translateY(0)}.error-message{color:#ff6b6b;text-align:center;background:#ff6b6b1a;border:1px solid #ff6b6b4d;border-radius:8px;padding:10px;font-size:.85em}.test-app-section{flex-direction:column;align-items:center;gap:10px;width:100%;margin-top:15px;display:flex}.test-app-section p{color:#8fa4d4;text-transform:uppercase;letter-spacing:1px;font-size:.8em;font-weight:600}.test-buttons{grid-template-columns:repeat(2,1fr);gap:8px;width:100%;display:grid}.test-btn{color:#fff;cursor:pointer;background:#1a2346cc;border:1px solid #00d4ff33;border-radius:8px;padding:8px 10px;font-size:.75em;font-weight:500;transition:all .3s}.test-btn:hover{color:#00d4ff;background:#00d4ff26;border-color:#00d4ff;transform:translateY(-2px)}@media (max-width:900px){.login-page-wrapper section span{width:calc(10vw - 2px);height:calc(10vw - 2px)}}@media (max-width:600px){.login-page-wrapper section span{width:calc(20vw - 2px);height:calc(20vw - 2px)}.signin{width:90%;padding:30px 25px}.content h2{font-size:1.6em}.test-buttons{grid-template-columns:repeat(2,1fr)}}