.tool-area{
    display:flex;
    justify-content:center;
    align-items:center;
    padding:70px 20px;
}

.age-card{
    width:100%;
    max-width:560px;
    background:white;
    padding:35px;
    border-radius:22px;
    box-shadow:0 14px 38px rgba(0,0,0,.12);
    text-align:left;
}

.age-card h1{
    text-align:center;
    color:#10b981;
    margin-bottom:25px;
}

.age-card label{
    display:block;
    font-weight:700;
    margin-bottom:8px;
}

/* =====================================================
   DATE OF BIRTH SELECTORS
   ===================================================== */

.dob-heading{
    font-weight:700;
    margin-bottom:15px;
}

.dob-fields{
    display:grid;
    grid-template-columns:
        repeat(3,1fr);

    gap:14px;

    margin-bottom:22px;
}

.dob-field label{
    display:block;

    margin-bottom:8px;

    font-weight:700;
}

.dob-field select{
    width:100%;

    padding:14px 12px;

    font-size:16px;

    border-radius:12px;

    border:1px solid #d1d5db;

    background:#ffffff;

    color:#111827;

    cursor:pointer;

    transition:.25s;
}

.dob-field select:focus{
    outline:none;

    border-color:#10b981;

    box-shadow:
        0 0 0 3px
        rgba(16,185,129,.15);
}

.age-btn{
    width:100%;
    border:none;
    border-radius:14px;
    padding:14px;
    background:#10b981;
    color:white;
    font-size:17px;
    font-weight:700;
    cursor:pointer;
}

.age-result{
    margin-top:25px;
    padding:20px;
    border-radius:16px;
    background:#f0fdf4;
    color:#064e3b;
    font-weight:700;
    line-height:1.8;
    display:none;
}

body.dark-mode .age-card{
    background:#1f2937;
    color:#e5e7eb;
}

body.dark-mode .dob-field select{

    background:#111827;

    color:#e5e7eb;

    border-color:#374151;

}

body.dark-mode .dob-field select:focus{

    border-color:#10b981;

}

body.dark-mode .age-result{
    background:#064e3b;
    color:#ecfdf5;
}
.age-reset-btn{
    width:100%;
    border:none;
    border-radius:14px;
    padding:14px;
    background:#374151;
    color:white;
    font-size:17px;
    font-weight:700;
    cursor:pointer;
    margin-top:12px;
}

.age-reset-btn:hover{
    background:#4b5563;
}
/* =====================================================
   MOBILE RESPONSIVE
   ===================================================== */

@media (max-width:600px){

    .dob-fields{

        grid-template-columns:1fr;

        gap:12px;

    }

}