body {
    font-family: system-ui, sans-serif, Arial, Helvetica;
    font-size: 18px;
    background-color: #ebf1f2;
    color: #111;
}

main {
    max-width: 1140px;
    margin: auto;
}

input {
    font-family: system-ui, sans-serif, Arial, Helvetica;
    font-size: 18px;
    padding: 5px;
    margin: 5px 0px;
    background-color: #fff;
    color: #111;
    border: 1px solid #ccc;
}

button {
    background-color: #5dd4f5;
    padding: 10px;
    font-family: system-ui, sans-serif, Arial, Helvetica;
    font-size: 20px;
    border: none;
    color: #000;
    cursor: pointer;
    font-weight: bold;
}

button:hover {
    background-color: #8de0f7;
}

/* 🌙 Dark Mode */
@media (prefers-color-scheme: dark) {
    body {
        background-color: #121212;
        color: #e0e0e0;
    }

    input {
        background-color: #1e1e1e;
        color: #e0e0e0;
        border: 1px solid #444;
    }

    button {
        background-color: #007ba7;
        color: #fff;
    }

    button:hover {
        background-color: #009fce;
    }
}