*{
    box-sizing:border-box;
}


body{

    margin:0;

    font-family: Arial, sans-serif;

    background:linear-gradient(135deg,#667eea,#764ba2);

    min-height:100vh;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

}



.container{

    background:white;

    width:600px;

    padding:40px;

    border-radius:20px;

    box-shadow:0 10px 30px rgba(0,0,0,0.2);

}



h1{

    text-align:center;

    font-size:40px;

    margin-bottom:10px;

    color:#333;

}


.subtitle{

    text-align:center;

    color:#666;

    margin-bottom:30px;

}



.input-box{

    display:flex;

    gap:10px;

}



input{

    flex:1;

    padding:15px;

    border-radius:10px;

    border:1px solid #ccc;

    font-size:16px;

}



button{

    padding:15px 25px;

    border:none;

    border-radius:10px;

    background:#667eea;

    color:white;

    font-size:16px;

    cursor:pointer;

}


button:hover{

    background:#5563c1;

}



#result{

    margin-top:30px;

}



.card{

    background:#f8f9ff;

    padding:20px;

    border-radius:15px;

    margin-top:20px;

}



.card p{

    font-size:16px;

    margin:12px 0;

}



.score{

    font-size:35px;

    font-weight:bold;

    text-align:center;

    color:#667eea;

}

.score-bar{

    width:100%;

    height:20px;

    background:#ddd;

    border-radius:20px;

    overflow:hidden;

    margin:15px 0;

}


.score-fill{

    height:100%;

    background:#667eea;

    border-radius:20px;

}
footer {
    width: 100%;
    text-align: center;
    margin-top: 30px;
    padding: 15px;
}

footer a {
    color: #555;
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
}
.loading-card{
    text-align:center;
}


.spinner{

    width:40px;
    height:40px;

    border:5px solid #ddd;
    border-top:5px solid #667eea;

    border-radius:50%;

    margin:20px auto;

    animation:spin 1s linear infinite;

}


@keyframes spin{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}