*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:sans-serif;
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    overflow:hidden;

    background:
    linear-gradient(
        135deg,
        #020617,
        #0f172a,
        #111827
    );
}

/* Animated Background */

.bg{
    position:absolute;
    width:600px;
    height:600px;

    background:
    radial-gradient(circle,#2563eb55,#0000);

    animation:float 6s ease-in-out infinite;
}

/* Card */

.card{
    width:90%;
    max-width:500px;

    padding:40px;

    border-radius:30px;

    text-align:center;

    background:rgba(255,255,255,0.07);

    backdrop-filter:blur(20px);

    border:1px solid rgba(255,255,255,0.08);

    box-shadow:
    0 25px 50px rgba(0,0,0,0.5);

    position:relative;
    z-index:2;

    animation:fadeIn 1s ease;
}

/* Icon */

.icon{
    width:100px;
    height:100px;

    margin:auto;

    border-radius:50%;

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

    background:
    linear-gradient(
        135deg,
        #2563eb,
        #7c3aed
    );

    box-shadow:
    0 0 40px rgba(59,130,246,0.5);

    margin-bottom:25px;

    animation:pulse 3s infinite;
}

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

h1{
    color:white;
    margin-bottom:12px;
    font-size:2rem;
}

p{
    color:#cbd5e1;
    margin-bottom:30px;
    line-height:1.6;
}

/* Input */

.input-group{
    display:flex;
    flex-direction:column;
    gap:15px;
}

input{
    padding:15px;

    border:none;
    outline:none;

    border-radius:15px;

    background:rgba(255,255,255,0.06);

    border:2px solid rgba(255,255,255,0.08);

    color:white;

    font-size:16px;

    transition:0.3s;
}

input::placeholder{
    color:#94a3b8;
}

input:focus{
    border-color:#3b82f6;

    box-shadow:
    0 0 20px rgba(59,130,246,0.4);
}

/* Button */

button{
    padding:15px;

    border:none;

    border-radius:15px;

    font-size:16px;
    font-weight:bold;

    cursor:pointer;

    color:white;

    background:
    linear-gradient(
        135deg,
        #2563eb,
        #7c3aed
    );

    transition:0.3s;
}

button:hover{
    transform:translateY(-3px);

    box-shadow:
    0 10px 25px rgba(59,130,246,0.4);
}

/* Result */

.result{
    margin-top:25px;

    padding:15px;

    border-radius:15px;

    display:none;

    animation:pop 0.4s ease;
}

.valid{
    display:block;

    background:rgba(34,197,94,0.15);

    border:1px solid rgba(34,197,94,0.3);

    color:#4ade80;
}

.invalid{
    display:block;

    background:rgba(239,68,68,0.15);

    border:1px solid rgba(239,68,68,0.3);

    color:#f87171;
}

.loading{
    display:flex;

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

    gap:10px;

    color:white;

    background:rgba(255,255,255,0.05);
}

/* Loader */

.loader{
    width:18px;
    height:18px;

    border-radius:50%;

    border:3px solid rgba(255,255,255,0.2);

    border-top:3px solid #60a5fa;

    animation:spin 1s linear infinite;
}

/* Animations */

@keyframes spin{
    to{
        transform:rotate(360deg);
    }
}

@keyframes fadeIn{
    from{
        opacity:0;
        transform:translateY(20px);
    }

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

@keyframes pop{
    from{
        opacity:0;
        transform:scale(0.9);
    }

    to{
        opacity:1;
        transform:scale(1);
    }
}

@keyframes pulse{
    0%,100%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.10);
    }
}

@keyframes float{
    0%,100%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(30px);
    }
}

.google-btn{
    margin-top:10px;

    background:
    linear-gradient(
        135deg,
        #ea4335,
        #4285f4
    );
}

.google-btn:hover{
    box-shadow:
    0 10px 25px rgba(66,133,244,0.4);
}