body {
    font-family: 'Arial', sans-serif;
    background-color: #f8f9fa;
}

h1 {
    font-size: 2rem;
    color: #333;
}

.card {
    border-radius: 10px;
    background-color: #fff;
}

.form-label {
    font-weight: 500;
}

.results p {
    margin: 0.5rem 0;
    font-size: 1.1rem;
}

.results span {
    font-weight: bold;
    color: #007bff;
}

/* Dark Mode */
body.dark-mode {
    background-color: #212529;
    color: #f8f9fa;
}

body.dark-mode .card {
    background-color: #343a40;
    color: #f8f9fa;
}

body.dark-mode h1,
body.dark-mode h3,
body.dark-mode .form-label {
    color: #f8f9fa;
}

body.dark-mode .results {
    background-color: #495057;
}

body.dark-mode .results span {
    color: #0dcaf0;
}

/* Button Styling */
#exportBtn {
    background-color: #007bff;
    border-color: #007bff;
}

#exportBtn:hover {
    background-color: #0056b3;
    border-color: #0056b3;
}

#resetBtn {
    background-color: #6c757d;
    border-color: #6c757d;
}

#resetBtn:hover {
    background-color: #5a6268;
    border-color: #5a6268;
}

/* Mobile Responsiveness */
@media (max-width: 576px) {
    h1 {
        font-size: 1.5rem;
    }

    h3 {
        font-size: 1.2rem;
    }

    .form-label {
        font-size: 0.9rem;
    }

    .results p {
        font-size: 0.95rem;
    }

    .btn {
        font-size: 0.9rem;
    }

    /* Stack buttons on mobile */
    #exportBtn,
    #resetBtn {
        width: 100%;
        margin-bottom: 0.5rem;
    }

    #exportBtn.me-2 {
        margin-right: 0;
    }
}