body { font-family: system-ui, -apple-system, sans-serif; padding: 10px; background: #f0f2f5; color: #333; }

.container { 
    max-width: 900px; 
    margin: auto; 
    background: white; 
    padding: 20px; 
    border-radius: 15px; 
    box-shadow: 0 10px 25px rgba(0,0,0,0.1); 
    display: flex;
    flex-direction: column;
    align-items: center;
}

.controls {
    display: flex;
    flex-direction: column; /* Stack the toggle and button vertically on mobile */
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}



/* Container for the switch and labels */
.switch-container {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: bold;
    font-size: 0.9rem;
}

/* The switch - the box around the slider */
.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 26px;
}

/* Hide default HTML checkbox */
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* The slider */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #8B0000; /* Red for Acid */
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
}

/* When checked (Base mode), change background and move circle */
input:checked + .slider {
    background-color: #000080; /* Blue for Base */
}

input:checked + .slider:before {
    transform: translateX(24px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}
/* Mobile Chart Fix */
.chart-wrapper {
    position: relative;
    height: 400px; /* Force height for mobile */
    width: 100%;
    margin-bottom: 10px;
}

@media (max-width: 600px) {
    /* 1. Adjust the chart for smaller screens */
    .chart-wrapper { 
        height: 300px; 
    }

    /* 2. Stack the toggle and the 'Generate' button vertically */
    .controls {
        flex-direction: column;
        width: 100%;
    }

    /* 3. Make buttons easier to tap on mobile */
    button { 
        width: 100%; 
        padding: 15px; /* Slightly larger tap target */
    }

    /* 4. Allow the input and submit button to stack if they run out of room */
    #input-wrap {
        flex-direction: column;
        width: 100%;
    }

    #user-pH {
        width: 100%; /* Make input full width on tiny screens */
        max-width: 200px;
    }
}

.stats-box { 
    width: 100%; /* Allows it to fill the container width */
    max-width: 600px; /* But keeps it from getting too wide on desktop */
    text-align: center; /* Centers the text inside the box */
    background: #e9ecef; 
    padding: 15px; 
    border-radius: 8px; 
    margin-bottom: 20px; 
    font-family: monospace; 
    line-height: 1.5;
}

#quiz-area {
    width: 100%;
    margin-top: 20px;
    padding: 20px;
    border-top: 2px solid #eee;
    display: flex;
    flex-direction: column;
    align-items: center; /* Centers the Prompt, Input, and Feedback */
    text-align: center;
}

button { 
    padding: 10px 20px; 
    background: #28a745; 
    color: white; 
    border: none; 
    border-radius: 6px; 
    cursor: pointer; 
    font-weight: bold; 
}

button.secondary { background: #007bff; }
input { padding: 8px; border: 1px solid #ccc; border-radius: 4px; width: 100px; }

/* Ensure the prompt is clear and spaced */
#question-prompt {
    margin-bottom: 15px;
    font-weight: 600;
}

/* Force the input and button to align horizontally and center */
#input-wrap {
    display: flex !important; /* Overrides the 'block' from previous JS if necessary */
    justify-content: center;
    align-items: center;
    gap: 10px; /* Adds consistent space between input and button */
    margin-top: 15px;
    flex-wrap: nowrap; /* Prevents them from stacking on small screens unless forced */
}

/* Adjust input width for better mobile alignment */
#user-pH {
    width: 100px;
    margin: 0; /* Remove default margins that might throw off alignment */
}

/* Ensure feedback text doesn't push the boxes around */
#feedback { min-height: 1.5rem; font-weight: bold; margin-top: 20px; font-size: 1rem; }
.legend-hint { font-size: 0.8rem; color: #666; text-align: center; }

footer {
  text-align: center;
  padding: 2px;
  background-color: Navy;
  color: white;
  border-radius: 10px;
}