/* Basic Reset & Body Styles */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Nunito', sans-serif;
    background-color: #f0f8ff; /* Alice Blue */
    color: #333;
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Align to top */
    min-height: 100vh;
    padding: 20px;
    line-height: 1.6;
}

/* Container */
.container {
    background-color: #ffffff;
    padding: 25px 30px; /* Adjusted padding */
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    text-align: center;
    max-width: 700px; /* Wider to accommodate inline buttons */
    width: 100%;
    margin-top: 20px;
}

h1 {
    color: #0056b3;
    margin-bottom: 25px;
    font-size: 2.5rem;
}

/* --- VISIBILITY --- */
.hidden {
    display: none;
}

/* --- SETTINGS AREA --- */
.settings-area {
    display: flex;
    justify-content: center; /* Center control groups */
    align-items: center;
    flex-wrap: wrap; /* Allow wrapping */
    gap: 20px 30px; /* Row gap, Column gap */
    margin-bottom: 25px;
}

.control-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.control-group label {
    font-size: 1rem; /* Slightly smaller label */
    font-weight: 600; /* Less bold */
    color: #444;
    flex-shrink: 0; /* Prevent label text from wrapping too easily */
}

.control-group select,
.control-group input[type="number"] {
    font-family: 'Nunito', sans-serif;
    font-size: 1rem;
    padding: 8px 12px;
    border: 2px solid #ccc;
    border-radius: 8px;
    background-color: #fff;
    cursor: pointer;
}

.control-group select {
     min-width: 110px; /* Adjust width */
}

.control-group input[type="number"] {
    width: 70px; /* Specific width for number input */
    text-align: center;
     /* Remove spinner arrows if desired */
    -moz-appearance: textfield;
    appearance: textfield;
}
.control-group input[type="number"]::-webkit-outer-spin-button,
.control-group input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Operation Buttons Container */
.operation-buttons-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    width: 100%;
    margin-bottom: 25px; /* Add margin below buttons */
}

/* General Button Styles */
button {
    padding: 12px 18px; /* Slightly adjusted padding */
    font-size: 1.1rem; /* Slightly adjusted font size */
    font-weight: 700;
    font-family: 'Nunito', sans-serif;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px; /* Smaller gap */
    flex-shrink: 0; /* Prevent buttons from shrinking too much */
}
/* Operation Button Specific Styles & Hover/Active */
.operation-btn { background-color: #4CAF50; color: white; box-shadow: 0 4px #388E3C; }
.operation-btn:hover { background-color: #45a049; transform: translateY(-2px); }
.operation-btn:active { box-shadow: 0 2px #388E3C; transform: translateY(2px); }
.operation-btn[data-operation="-"] { background-color: #f44336; box-shadow: 0 4px #d32f2f; }
.operation-btn[data-operation="-"]:hover { background-color: #e53935; }
.operation-btn[data-operation="-"]:active { box-shadow: 0 2px #d32f2f; transform: translateY(2px); }
.operation-btn[data-operation="*"] { background-color: #2196F3; box-shadow: 0 4px #1976D2; }
.operation-btn[data-operation="*"]:hover { background-color: #1e88e5; }
.operation-btn[data-operation="*"]:active { box-shadow: 0 2px #1976D2; transform: translateY(2px); }
.operation-btn[data-operation="/"] { background-color: #FFC107; box-shadow: 0 4px #FFA000; color: #333; }
.operation-btn[data-operation="/"]:hover { background-color: #ffb300; }
.operation-btn[data-operation="/"]:active { box-shadow: 0 2px #FFA000; transform: translateY(2px); }

/* Style for the currently active operation button - NO BORDER */
.operation-btn.active {
    /* border-color: #0056b3; */ /* Ensure this is removed/commented */
    box-shadow: 0 2px #666; /* Keep subtle shadow change */
    transform: translateY(1px); /* Keep slight press effect */
    opacity: 0.95; /* Optional: slightly dim if needed */
}
.op-symbol { font-size: 1.5rem; font-weight: bold; } /* Slightly smaller symbol */

/* Divider */
.divider {
    border: none;
    border-top: 2px solid #eee;
    margin: 0 0 25px 0; /* Only margin bottom before problem area */
}

/* Problem Area */
.problem-area {
    margin-top: 0; /* Remove top margin as divider handles spacing */
    padding-top: 15px;
}

#problem-list-title {
    color: #555;
    margin-bottom: 20px;
    font-size: 1.6rem; /* Slightly smaller title */
}

/* Problem List Container */
.problem-list {
    display: flex;
    flex-direction: column;
    gap: 18px; /* Space between problem items */
    margin-bottom: 30px; /* Space before check button */
    text-align: left; /* Align items left */
}

/* Individual Problem Item */
.problem-item {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Push feedback icon to the right */
    padding: 10px 15px;
    border: 1px solid #eee;
    border-radius: 8px;
    background-color: #fdfdfd;
}

.problem-text {
    font-size: 1.8rem; /* Size for numbers/operators */
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px; /* Space within the problem text */
    flex-grow: 1; /* Allow text to take available space */
}

.problem-text .number {
    color: #333;
    padding: 3px 8px;
    background-color: #e8e8e8;
    border-radius: 6px;
    min-width: 1.5em; /* Ensure some width for single digits */
    text-align: center;
    display: inline-block;
}

.problem-text .operator {
    color: #0056b3;
    min-width: 1em;
    text-align: center;
}

/* Input field within the list */
.answer-input-list {
    font-family: 'Nunito', sans-serif;
    font-size: 1.7rem; /* Slightly smaller than numbers */
    font-weight: 700;
    width: 75px; /* Fixed width */
    height: 50px; /* Fixed height */
    text-align: center;
    border: 2px solid #ccc;
    border-radius: 8px;
    padding: 5px;
    color: #e65100;
    background-color: #fffacd;
    margin: 0 5px; /* Spacing around input */

    /* Remove spinner arrows */
    -moz-appearance: textfield;
    appearance: textfield;
}
.answer-input-list::-webkit-outer-spin-button,
.answer-input-list::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Input field validation styles */
.answer-input-list.correct-input {
    border-color: #4CAF50; /* Green border for correct */
    background-color: #e9f7e9;
}

.answer-input-list.incorrect-input {
    border-color: #f44336; /* Red border for incorrect */
    background-color: #fdecea;
}

/* Feedback Indicator next to each problem */
.feedback-indicator {
    font-size: 1.5rem; /* Size of check/cross */
    min-width: 25px; /* Reserve space */
    text-align: right;
    margin-left: 15px; /* Space from problem text */
    white-space: nowrap; /* Prevent wrapping of icon and text */
}

.feedback-indicator.correct::before {
    content: '✔️';
    color: #4CAF50; /* Green check */
}

.feedback-indicator.incorrect::before {
    content: '❌';
    color: #f44336; /* Red cross */
}

/* Show correct answer AFTER the incorrect indicator */
.feedback-indicator.incorrect::after { /* Target the indicator directly */
    content: " (Correct: " attr(data-correct-answer) ")"; /* Display text + value */
    color: #e53935; /* Slightly different red */
    font-size: 0.9rem;
    font-weight: 600;
    margin-left: 8px; /* Space after the cross */
    display: inline-block; /* Keep it inline */
    vertical-align: middle; /* Align nicely with the cross */
}

/* Check All Button */
.check-btn { /* Applies to #check-all-button */
    background-color: #ff9800; color: white; padding: 15px 30px;
    font-size: 1.3rem; margin-top: 0; /* Remove top margin, handled by list margin */
    display: block; margin-left: auto; margin-right: auto;
    max-width: 300px; width: fit-content; box-shadow: 0 4px #f57c00;
    border: none; border-radius: 10px; cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.check-btn:hover { background-color: #fb8c00; transform: translateY(-2px); }
.check-btn:active { box-shadow: 0 2px #f57c00; transform: translateY(2px); }

/* Summary Feedback Area */
.summary-feedback {
    margin-top: 25px;
    font-size: 1.3rem;
    font-weight: 700;
    color: #0056b3;
    min-height: 1.5em; /* Reserve space */
}

/* Responsive Adjustments */
@media (max-width: 650px) { /* Button wrapping breakpoint */
     .operation-buttons-container {
        gap: 10px;
    }
     button.operation-btn {
         padding: 10px 15px;
         font-size: 1rem;
     }
    .op-symbol { font-size: 1.3rem; }
}

@media (max-width: 600px) { /* Problem list adjustments */
    .problem-text { font-size: 1.5rem; gap: 8px;}
    .answer-input-list { font-size: 1.4rem; width: 65px; height: 45px;}
    .feedback-indicator { font-size: 1.3rem; }
    .feedback-indicator.incorrect::after { font-size: 0.85rem; margin-left: 6px;}
    .problem-item { padding: 8px 10px; }
    .problem-list { gap: 15px; }
}

@media (max-width: 480px) { /* Major layout changes for small screens */
    body { padding: 10px; align-items: flex-start; }
    .container { padding: 20px 15px; margin-top: 10px; max-width: 100%; }
    h1 { font-size: 2rem; margin-bottom: 20px;}

    .settings-area {
        flex-direction: column; /* Stack settings vertically */
        gap: 15px; /* Reduce gap */
        align-items: stretch; /* Make groups take full width */
    }
    .control-group {
        justify-content: space-between; /* Space out label and input */
    }
    .control-group label { font-size: 0.9rem; }
     .control-group select,
     .control-group input[type="number"] { font-size: 0.9rem; padding: 6px 10px; }
     .control-group select { min-width: 100px; }
     .control-group input[type="number"] { width: 60px; }

     .operation-buttons-container { gap: 8px; margin-bottom: 20px; }
    button.operation-btn { padding: 8px 10px; font-size: 0.9rem; gap: 5px;}
    .op-symbol { font-size: 1.2rem; }

    .divider { margin: 0 0 20px 0; }
    .problem-area { margin-top: 0; padding-top: 15px; }
    #problem-list-title { font-size: 1.4rem; }

    .problem-item { flex-direction: row; align-items: center; gap: 5px;} /* Revert stacking, try to keep inline */
    .problem-text { font-size: 1.3rem; gap: 5px; flex-wrap: wrap; flex-grow: 1;} /* Allow wrap within text */
    .answer-input-list { font-size: 1.3rem; width: 55px; height: 40px; margin: 3px;}
    .feedback-indicator {
        font-size: 1.2rem;
        margin-left: auto; /* Push to the right */
        padding-left: 10px; /* Ensure some space */
        white-space: normal; /* Allow wrapping if necessary */
        text-align: right;
        align-self: center;
    }
     .feedback-indicator.incorrect::after {
        font-size: 0.8rem;
        margin-left: 5px;
        display: block; /* Stack below the X */
        text-align: right;
        margin-top: 2px;
    }

     .check-btn { font-size: 1.1rem; padding: 12px 20px; }
     .summary-feedback { font-size: 1.1rem; margin-top: 20px;}
}