body {
        font-family: 'Poppins', sans-serif;
        background: radial-gradient(circle at top, #6366f1, #4f46e5, #1e1b4b);
        height: 100vh;
        overflow: hidden;
    }
    .right-side{
        position:relative;
    }

    .right-side::before{
        content:'';
        position:absolute;
        inset:0;
        background:rgba(0,0,0,0.25);
    }
    .left-side {
        background: #f8fafc;
        color: #1e293b; 
    }

    .left-side .login-card {
        color: #1e293b;
    }

    .left-side .form-control {
        color: #1e293b;
        background: #ffffff;
    }

    .left-side .form-control::placeholder {
        color: #94a3b8;
    }

    .left-side .input-group-text {
        background: #e2e8f0;
        color: #475569;
    }

    .left-side .btn-custom {
        background: linear-gradient(135deg, #6366f1, #4f46e5);
    }
    
    .login-card {
        backdrop-filter: blur(25px);
        background: rgba(255, 255, 255, 0.08);
        border-radius:5px;
        padding: 40px 30px;
        width: 100%;
        max-width: 360px;
        color: white;
        box-shadow: 0 20px 60px rgba(0,0,0,0.3);
        border: 1px solid rgba(255,255,255,0.1);
        animation: fadeInUp 0.6s ease;
    }

    .logo-img {
        width: 70px;
        height: 70px;
        object-fit: contain;
        filter: drop-shadow(0 0 12px rgba(99,102,241,0.4));
    }

    .register-form{
      display:none;
      animation:slideForm .4s ease;
    }

    .login-form{
        animation:slideForm .4s ease;
    }

    @keyframes slideForm{
        from{
            opacity:0;
            transform:translateX(40px);
        }

        to{
            opacity:1;
            transform:translateX(0);
        }

    }

    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(25px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* INPUT */
    .input-group-text {
        background: rgba(255,255,255,0.1);
        border: none;
        color: white;
    }

    .form-control {
        background: rgba(255,255,255,0.05);
        border: none;
        border-radius: 12px;
        padding: 12px;
        color: white;
    }

    .form-control::placeholder {
        color: rgba(255,255,255,0.6);
    }

    .form-control:focus {
        box-shadow: 0 0 0 2px #818cf8;
        background: rgba(255,255,255,0.08);
    }

    /* BUTTON */
    #loginBtn {
        background: linear-gradient(135deg, #00abe6, #00a0d6);
        color: white;
        border-radius: 10px;
        font-weight: 500;
        border: none;
        padding: 10px;
        box-shadow: 0 8px 25px rgba(99,102,241,0.4);
        transition: all 0.3s ease;
    }

    #loginBtn:hover{
        transform: translateY(-2px) scale(1.02);
        box-shadow: 0 10px 30px rgba(99,102,241,0.6);
    }

    .icon-logo i {
        font-size: 35px;
        color: white;
    }

    /* TITLE */
    h4 {
        font-size: 28px;
        font-weight: 700;
        letter-spacing: 2px;
    }

    /* ALERT */
    .alert {
        border-radius: 12px;
        font-size: 14px;
        backdrop-filter: blur(10px);
    }

    /* FOOTER */
    .footer {
        font-size:12px;
        color:#94a3b8;
        opacity: 0.7;
    }
    #togglePassword {
        background: #f1f5f9;  
        border: 1px solid #e2e8f0;
        border-left: none;   
        color: #475569;
        border-radius: 0 12px 12px 0;
    }

    .input-group .form-control {
        border-right: none; 
    }

    .subtitle{
        color:#64748b;
        font-size:14px;
        letter-spacing:0.2px;
    }

    /* QR BUTTON */
    .btn-qr{
        width:52px;
        border:none;
        border-radius:10px;
        background:linear-gradient(135deg, #00abe6, #00a0d6);
        color:white;
        display:flex;
        align-items:center;
        justify-content:center;
        font-size:20px;
        box-shadow:0 8px 25px rgba(99,102,241,0.4);
        transition:all .3s ease;
    }

    .btn-qr:hover{
        transform:translateY(-2px) scale(1.02);
        box-shadow:0 10px 30px rgba(99,102,241,0.6);
        color:white;
    }

    .btn-qr:active{
        transform:scale(.96);
    }

    /* BUTTON TOGGLE */
    .developer-toggle{
        position:absolute;
        top:20px;
        right:20px;
        z-index:1000;
        width:40px;
        height:40px;
        border:none;
        border-radius:50%;
        background:rgba(255,255,255,0.15);
        color:white;
        backdrop-filter:blur(10px);
        cursor:pointer;
        transition:0.3s;
    }

    .developer-toggle:hover{
        transform:scale(1.1);
        background:#00abe6;
    }

    /* PANEL */
    .developer-panel{
        position:absolute;
        inset:0;
        background:rgba(15,23,42,0.95);
        backdrop-filter:blur(10px);

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

        transform:translateX(100%);
        transition:0.5s ease;
    }

    /* ACTIVE PANEL */
    .developer-panel.active{
        transform:translateX(0);
    }

    .developer-content{
        text-align:center;
        color:white;
        padding:40px;
        max-width:500px;
    }

    .developer-logo{
        width:100px;
        margin-bottom:20px;
    }

    .developer-content h2{
        font-weight:700;
        letter-spacing:2px;
    }

    .developer-subtitle{
        color:#cbd5e1;
        margin-bottom:20px;
    }

    @media (max-width: 576px) {
        .login-card {
            margin: 0 5px;
            padding: 30px 20px;
        }
        .btn-qr{
            width:50px;
            font-size:18px;
        }
    }