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


body {

    background: #111827;
    color: white;

    display: flex;
    justify-content: center;

    padding: 35px 15px;

}



.container {

    width: 100%;
    max-width: 850px;

}



h1 {

    text-align: center;
    font-size: 2.2rem;
    margin-bottom: 10px;

}



.subtitle {

    text-align: center;
    color: #9ca3af;

    margin-bottom: 35px;

}




.section-title {

    font-size: 1.4rem;
    font-weight: bold;

    margin: 25px 0 12px;

    color: #60a5fa;

}




.card {

    background: #1f2937;

    border-radius: 16px;

    padding: 25px;

    margin-bottom: 20px;

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

}




.grid {

    display: grid;

    grid-template-columns:
    repeat(auto-fit,minmax(180px,1fr));

    gap: 20px;

}




.field {

    display:flex;
    flex-direction:column;

}



label {

    color:#d1d5db;

    font-weight:bold;

    margin-bottom:8px;

}



input {

    background:#374151;

    border:none;

    border-radius:8px;

    padding:12px;

    color:white;

    font-size:18px;

}



input:focus {

    outline:2px solid #2563eb;

}





h2 {

    font-size:1.3rem;

    margin-bottom:20px;

    color:#e5e7eb;

}




.metric {

    margin:22px 0;

}




.metric-header {

    display:flex;

    justify-content:space-between;

    margin-bottom:10px;

    font-size:18px;

}





.bar {

    width:100%;

    height:16px;

    background:#374151;

    border-radius:50px;

    overflow:hidden;

}



.fill {

    width:0%;

    height:100%;

    border-radius:50px;

    transition:

    width .4s ease;

}





.status {

    margin-top:8px;

    font-weight:bold;

    font-size:16px;

}




.score-card {

    text-align:center;

    padding:35px;

}




.score-title {

    font-size:22px;

    margin-bottom:15px;

}



.score {

    font-size:65px;

    font-weight:bold;

}



.scoreStatus {

    font-size:28px;

    margin-top:10px;

    font-weight:bold;

}




.hidden {

    display:none;

}




.green {

    color:#22c55e;

}



.yellow {

    color:#facc15;

}



.orange {

    color:#fb923c;

}



.red {

    color:#ef4444;

}



.gray {

    color:#9ca3af;

}




@media(max-width:600px){


h1 {

    font-size:1.7rem;

}


.score {

    font-size:48px;

}

.info {

    margin-top:8px;
    color:#9ca3af;
    font-size:13px;
    line-height:1.4;

}

.metric-header {

    font-size:16px;

}


}