body {
            background: #f5f5f5;
        }

        .card {
            border-radius: 15px;
            margin-top: 25px;
        }

        .preview {
            width: 250px;
            height: 250px;
            border: 2px dashed #ccc;
            border-radius: 10px;
            object-fit: contain;
            background: white;
            padding: 5px;
        }

        .status {
            font-size: 22px;
            font-weight: bold;
        }

        .barcode {
            font-size: 24px;
            font-weight: bold;
            text-align: center;
            height: 60px;
        }

        .btnsave {
            height: 55px;
            font-size: 22px;
        }
        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
}

body{

    height:100vh;

    background:linear-gradient(135deg,#4F46E5,#9333EA,#EC4899);

    display:flex;
    justify-content:center;
    align-items:center;

    overflow:hidden;
}

/* Background Blur */

body:before{
    content:'';
    position:absolute;
    width:450px;
    height:450px;
    background:#ffffff22;
    border-radius:50%;
    top:-150px;
    left:-120px;
    filter:blur(10px);
}

body:after{
    content:'';
    position:absolute;
    width:350px;
    height:350px;
    background:#ffffff18;
    border-radius:50%;
    right:-80px;
    bottom:-120px;
    filter:blur(20px);
}

.login-page{

    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
}

.login-card{

    width:400px;
    padding:45px;

    background:rgba(255,255,255,.18);

    backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.25);

    border-radius:25px;

    box-shadow:0 20px 50px rgba(0,0,0,.2);

    animation:fadeUp .6s;
}

.logo-section{

    text-align:center;
    margin-bottom:35px;
}

.logo{

    width:85px;
    height:85px;
    border-radius:50%;
    background:#fff;
    padding:8px;
    margin-bottom:15px;
}

.logo-section h2{

    color:#fff;
    font-weight:600;
    margin-bottom:8px;
}

.logo-section p{

    color:#f3f3f3;
    font-size:14px;
}

.input-group{

    position:relative;
    margin-bottom:20px;
}

.input-group i{

    position:absolute;
    left:18px;
    top:50%;
    transform:translateY(-50%);
    color:#666;
    font-size:18px;
}

.form-control{

    width:100%;
    height:52px;

    border:none;
    outline:none;

    padding-left:50px;

    border-radius:14px;

    font-size:15px;

    background:#fff;
}

.form-control:focus{

    box-shadow:0 0 0 4px rgba(79,70,229,.25);
}

.remember{

    display:flex;
    justify-content:space-between;
    align-items:center;

    margin-bottom:25px;

    color:#fff;
    font-size:14px;
}

.remember a{

    color:#fff;
    text-decoration:none;
}

.remember a:hover{

    text-decoration:underline;
}

.login-btn{

    width:100%;
    height:52px;

    border:none;

    border-radius:14px;

    background:linear-gradient(90deg,#4F46E5,#7C3AED);

    color:#fff;

    font-size:16px;

    font-weight:600;

    cursor:pointer;

    transition:.35s;
}

.login-btn:hover{

    transform:translateY(-3px);

    box-shadow:0 15px 35px rgba(0,0,0,.25);
}

#LblMsg{

    display:block;
    text-align:center;
    color:#ffeb3b;
    margin-bottom:15px;
}

@keyframes fadeUp{

    from{

        opacity:0;
        transform:translateY(40px);
    }

    to{

        opacity:1;
        transform:translateY(0px);
    }
}

@media(max-width:480px){

.login-card{

    width:92%;
    padding:30px;
}

.logo{

    width:70px;
    height:70px;
}

}
.login-btn {
     display: block;
    width: 100%;
    text-align: center;
    background: #4F46E5;
    color: #fff;
    padding: 18px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
     position:relative;
    z-index:9999;
}

.login-btn:hover {
    background: #4F46E5;
}

.login-btn:active {
    transform: scale(0.98);
    background: #1e7e34;
}

.login-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(40,167,69,.25);
}

.login-btn:disabled {
    background: #9E9E9E;
    color: #fff;
    cursor: not-allowed;
    opacity: .8;
}