/* ===========================
   PrOCaR Score Calculator
   =========================== */

body {

    margin: 0;
    padding: 40px 20px;

    font-family: -apple-system,
                 BlinkMacSystemFont,
                 "Segoe UI",
                 Roboto,
                 Helvetica,
                 Arial,
                 sans-serif;

    background: #f5f7fa;
    color: #333;

}

.container {

    max-width: 650px;
    margin: auto;

}

/* ---------- Header ---------- */

h1 {

    text-align: center;
    color: #b00020;
    font-size: 40px;
    margin-bottom: 8px;

}

.subtitle {

    text-align: center;
    color: #666;
    font-size: 18px;
    margin-bottom: 35px;

}

/* ---------- Card ---------- */

.card {

    background: white;

    border-radius: 18px;

    padding: 30px;

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

}

/* ---------- Labels ---------- */

label {

    display: block;

    font-weight: 600;

    margin-top: 22px;
    margin-bottom: 8px;

    color: #444;

}

/* ---------- Inputs ---------- */

input,
select {

    width: 100%;

    padding: 14px;

    font-size: 17px;

    border-radius: 10px;

    border: 1px solid #cccccc;

    box-sizing: border-box;

    transition: 0.2s;

}

input:focus,
select:focus {

    outline: none;

    border-color: #b00020;

    box-shadow: 0 0 6px rgba(176,0,32,0.25);

}

/* ---------- Buttons ---------- */

button {

    width: 100%;

    padding: 15px;

    margin-top: 25px;

    font-size: 18px;

    font-weight: bold;

    border: none;

    border-radius: 10px;

    cursor: pointer;

    transition: 0.25s;

}

button:hover {

    transform: translateY(-2px);

}

button:first-of-type {

    background: #b00020;
    color: white;

}

button:first-of-type:hover {

    background: #8e0019;

}

.reset {

    background: #d8d8d8;
    color: #444;

    margin-top: 12px;

}

.reset:hover {

    background: #c4c4c4;

}

/* ---------- Results ---------- */

.result {

    margin-top: 30px;

    background: white;

    border-radius: 18px;

    padding: 30px;

    text-align: center;

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

}

.result h2 {

    margin-top: 0;
    color: #b00020;

}

.result p {

    font-size: 18px;

    margin: 18px 0;

}

#score {

    font-size: 24px;

    font-weight: bold;

}

#probability {

    font-size: 34px;

    font-weight: bold;

    line-height: 1.5;

}

/* ---------- Footer ---------- */

.footer {

    text-align: center;

    color: #777;

    font-size: 14px;

    margin-top: 35px;

}

/* ---------- Mobile ---------- */

@media (max-width:600px){

    body{

        padding:20px;

    }

    h1{

        font-size:32px;

    }

    .subtitle{

        font-size:16px;

    }

    .card,
    .result{

        padding:22px;

    }

    #probability{

        font-size:28px;

    }

}