/* 3. Change screen background to white */
        body {
            background-color: #ffffff; /* White background */
            color: #1f2937; /* Dark text for contrast */
            font-family: Arial, Helvetica, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
        }

        #container {
            display: flex;
            flex-direction: column;
            min-height: 100vh;
            width: 100%;
        }

        #main-content {
            display: flex;
            justify-content: center;
            align-items: flex-start;
            gap: 2rem;
            padding: 2rem;
            flex-grow: 1;
        }

        #solution-container {
            background-color: #FFFFFF;
            padding: 10px;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            border: 1px solid #e5e7eb; /* Light border for definition */
            width: 550px; 
            max-width: 100%;
        }
        
        #solution-board {
            width: 100%;
            height: auto;
            display: block;
        }
        
        #controls-container {
            background-color: #f3f4f6; /* Light grey card background */
            color: #1f2937; /* Dark text */
            padding: 24px;
            border-radius: 8px;
            width: 320px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            border: 1px solid #e5e7eb;
            max-width: 100%; 
            box-sizing: border-box;
        }

        #puzzle-title {
            color: #0284c7; /* Darker blue for light mode */
            margin-top: 0;
            font-size: 1.2rem;
            text-align: left;
        }

        .subtitle {
            color: #6b7280;
            margin-top: -15px;
            margin-bottom: 20px;
            font-size: 0.9em;
        }

        #controls-container p {
            font-size: 0.9em;
            text-align: left;
            margin-bottom: 1rem;
        }

        #gui {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        /* 1. Date selections labels lined up horizontally and date selection under the label */
        .date-row {
            display: flex;
            justify-content: space-between;
            gap: 10px;
        }

        .selector-group {
            display: flex;
            flex-direction: column; /* Stacks label on top of input */
            flex: 1;
        }

        label {
            font-weight: bold;
            font-size: 0.85rem;
            margin-bottom: 4px;
            color: #374151;
        }

        select {
            background-color: #ffffff; /* White input bg */
            color: #1f2937; /* Dark text */
            border: 1px solid #d1d5db; /* Grey border */
            border-radius: 6px;
            padding: 8px;
            width: 100%;
            box-sizing: border-box;
        }

        /* 2. Hint and Reset buttons lined up horizontally */
        .button-row {
            display: flex;
            gap: 10px;
        }

        button {
            color: white;
            border: none;
            padding: 12px;
            border-radius: 6px;
            font-size: 1em;
            font-weight: bold;
            cursor: pointer;
            transition: opacity 0.2s;
            flex: 1; /* Makes buttons equal width */
        }

        button:hover {
            opacity: 0.9;
        }

        button:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        /* 4. Hint button set to Green color */
        #hint-button {
            background-color: #16a34a; /* Green */
        }

        #reset-button {
            background-color: #dc2626; /* Red */
        }

        #status {
            min-height: 20px;
            text-align: center;
            font-weight: bold;
            color: #b45309; /* Dark Amber for visibility */
        }
        
        footer { 
            display: block; 
            width: 100%;
            padding: 1.5rem 0;
            text-align: center;
            color: #6b7280; /* Grey text */
            font-size: 0.9em;
        }
        footer a {
            color: #0284c7;
            text-decoration: none;
        }
        footer a:hover {
            text-decoration: underline;
        } 

        /* Mobile Responsive Styles */
        @media (max-width: 900px) {
            body {
                display: block;
                min-height: 0;
            }

            #container {
                min-height: 0;
            }

            #main-content {
                flex-direction: column;
                align-items: center;
                padding: 1rem;
                gap: 1rem;
            }

            #controls-container {
                width: 100%;
                max-width: 550px;
                box-sizing: border-box;
            }

            #solution-container {
                width: 100%;
                max-width: 550px;
            }
        }