body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
    background-color: #f8f9fa;
    color: #212529;
    padding: 0 10px; /* Add some padding for smaller screens */
}

h1, h2 {
    color: #343a40;
    margin-bottom: 0.5em;
    text-align: center;
}
p {
    margin-bottom: 1em;
    color: #6c757d;
    text-align: center;
}

#main-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px; /* Space between input and output grids */
    margin-bottom: 20px;
    width: 100%;
}

.grid-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sudoku-grid {
    border-collapse: collapse;
    border: 3px solid black;
    margin-bottom: 15px; /* Space below grid */
    background-color: white;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    /* Ensure grid doesn't overflow on small screens */
    max-width: calc(45px * 9 + 6px); /* width * 9 + border */
    width: 100%;
}

.sudoku-grid td {
    border: 1px solid #adb5bd; /* Lighter gray borders */
    width: 11.11%; /* Equal width */
    /* Maintain aspect ratio */
    padding-top: 11.11%;
    height: 0;
    position: relative; /* For absolute positioning of content */
    text-align: center;
    vertical-align: middle;
    font-size: clamp(1em, 3vw, 1.3em); /* Responsive font size */
    box-sizing: border-box;
}

/* Thicker borders for 3x3 boxes */
.sudoku-grid tr:nth-child(3n) td {
    border-bottom: 2px solid #495057;
}
.sudoku-grid td:nth-child(3n) {
    border-right: 2px solid #495057;
}
.sudoku-grid tr:first-child td { border-top: none; }
.sudoku-grid tr:last-child td { border-bottom: none; }
.sudoku-grid td:first-child { border-left: none; }
.sudoku-grid td:last-child { border-right: none; }

/* Content wrapper inside td for centering */
.cell-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}


.sudoku-grid input[type="number"] {
    width: 90%; /* Slightly smaller than cell */
    height: 90%;
    border: none;
    text-align: center;
    font-size: 1em; /* Inherit from td */
    background-color: transparent;
    padding: 0;
    box-sizing: border-box;
    /* Hide spinner buttons for number inputs */
    -moz-appearance: textfield;
    appearance: textfield;
    color: #0d6efd; /* Blue for input numbers */
}
/* For Chrome, Safari, Edge, Opera */
.sudoku-grid input::-webkit-outer-spin-button,
.sudoku-grid input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.sudoku-grid input:focus {
    outline: 2px solid #0d6efd;
    outline-offset: -2px;
    background-color: #e9f3ff;
}

.controls {
    margin-bottom: 20px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

.controls button {
    padding: 10px 20px;
    font-size: 1em;
    cursor: pointer;
    border: 1px solid #6c757d;
    border-radius: 5px;
    background-color: #f8f9fa;
    color: #495057;
    transition: background-color 0.2s ease, color 0.2s ease;
    white-space: nowrap;
}
.controls button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.controls button#solve-button {
    background-color: #198754; /* Green */
    color: white;
    border-color: #198754;
}
.controls button#clear-button {
    background-color: #dc3545; /* Red */
    color: white;
    border-color: #dc3545;
}
.controls button#home-button {
    background-color: #0d6efd; /* Blue */
    color: white;
    border-color: #0d6efd;
}
.controls button:hover:not(:disabled) {
    filter: brightness(95%);
}
.controls button#solve-button:hover:not(:disabled) {
     background-color: #157347;
     border-color: #157347;
}
.controls button#clear-button:hover:not(:disabled) {
     background-color: #bb2d3b;
     border-color: #bb2d3b;
}
.controls button#home-button:hover:not(:disabled) {
    background-color: #1458be; /* Blue */
    border-color: #1458be;
}
.message {
    margin-top: 5px; /* Reduced margin */
    margin-bottom: 15px;
    padding: 12px 20px;
    border-radius: 5px;
    text-align: center;
    font-weight: 500;
    width: 90%;
    max-width: 800px; /* Wider max width */
    box-sizing: border-box;
}
.message.success {
    background-color: #d1e7dd;
    color: #0f5132;
    border: 1px solid #badbcc;
}
.message.error {
    background-color: #f8d7da;
    color: #842029;
    border: 1px solid #f5c2c7;
}
.message.info {
    background-color: #cfe2ff;
    color: #084298;
    border: 1px solid #b6d4fe;
}

/* Style for solved cells in output */
.solved-cell {
    font-weight: bold;
    color: #198754; /* Green for solved numbers */
}
.given-cell {
     color: #212529; /* Default text color for original numbers */
     font-weight: bold; /* Make givens bold too */
}
.empty-cell {
    color: #e9ecef; /* Very light gray for dots */
}