/* Base & Layout */
body { font-family: Arial, sans-serif; background-color: #f4f4f9; color: #333; margin: 0; padding: 20px; transition: background-color 0.3s, color 0.3s; }
.hidden { display: none !important; }
.top-bar { display: flex; justify-content: space-between; align-items: center; max-width: 900px; margin: 0 auto 20px auto; }
.top-bar button { background: none; border: 1px solid #ccc; color: inherit; padding: 5px 10px; border-radius: 20px; cursor: pointer; font-size: 14px; }
.top-bar button:hover { background-color: #e0e0e0; }

/* Main App Header */
.header-container { text-align: center; margin-bottom: 20px; }
h1 { margin-bottom: 5px; }
.score-board { font-size: 20px; font-weight: bold; color: #2e7d32; }

/* Controls & History */
.controls { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-bottom: 20px; max-width: 900px; margin-left: auto; margin-right: auto;}
select, button, input[type="checkbox"] { padding: 8px; font-size: 15px; cursor: pointer; border-radius: 4px; border: 1px solid #ccc; }
button.action-btn { background-color: #007bff; color: white; border: none; font-weight: bold; }
button.action-btn:hover { background-color: #0056b3; }

#history-panel { max-width: 900px; margin: 0 auto 20px auto; background: #e9ecef; padding: 10px; border-radius: 5px; font-size: 14px; }
#history-list { list-style: none; padding: 0; margin: 5px 0 0 0; }
#history-list li { padding: 5px 0; border-bottom: 1px solid #ccc; }

/* Multi-Grid Layout */
#boards-wrapper { display: flex; flex-wrap: wrap; gap: 30px; justify-content: center; max-width: 1200px; margin: 0 auto; }
.board-container { display: flex; flex-direction: column; align-items: center; background: #fff; padding: 15px; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.05); }
.board-actions { margin-top: 10px; display: flex; gap: 5px; }
.board-actions button { font-size: 13px; padding: 5px 10px; }
.btn-solve { background-color: #dc3545; color: white; border: none; }
.btn-check { background-color: #28a745; color: white; border: none; }

/* Sudoku Grid */
.sudoku-board { display: grid; grid-template-columns: repeat(9, 35px); grid-template-rows: repeat(9, 35px); gap: 1px; background-color: #333; border: 2px solid #333; }
.cell { width: 35px; height: 35px; background-color: #fff; text-align: center; font-size: 18px; border: none; outline: none; margin: 0; padding: 0; color: #333; }
.cell:nth-child(3n) { border-right: 2px solid #333; }
.cell:nth-child(n+19):nth-child(-n+27), .cell:nth-child(n+46):nth-child(-n+54) { border-bottom: 2px solid #333; }
.cell:focus { background-color: #e0f7fa; }
.cell.fixed { background-color: #e9e9e9; color: #555; font-weight: bold; }
.cell.correct { color: #2e7d32; font-weight: bold; }
.cell.incorrect { color: #d32f2f; font-weight: bold; background-color: #ffcdd2; }

/* Tutorial Modal */
#tutorial-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); display: flex; justify-content: center; align-items: center; z-index: 1000; }
.tutorial-content { background: #fff; padding: 25px; border-radius: 8px; max-width: 500px; width: 90%; position: relative; }
.close-btn { position: absolute; top: 10px; right: 15px; cursor: pointer; font-size: 20px; font-weight: bold; }

/* Dark Mode */
body.dark-mode { background-color: #121212; color: #e0e0e0; }
body.dark-mode .board-container, body.dark-mode .tutorial-content { background-color: #1e1e1e; color: #e0e0e0; box-shadow: none; border: 1px solid #333; }
body.dark-mode select, body.dark-mode input { background-color: #333; color: #fff; border-color: #555; }
body.dark-mode #history-panel { background: #2a2a2a; }
body.dark-mode .score-board { color: #66bb6a; }
body.dark-mode .sudoku-board { background-color: #888; border: 2px solid #888; }
body.dark-mode .cell { background-color: #222; color: #e0e0e0; }
body.dark-mode .cell:nth-child(3n) { border-right: 2px solid #888; }
body.dark-mode .cell:nth-child(n+19):nth-child(-n+27), body.dark-mode .cell:nth-child(n+46):nth-child(-n+54) { border-bottom: 2px solid #888; }
body.dark-mode .cell.fixed { background-color: #1a1a1a; color: #888; }
body.dark-mode .cell:focus { background-color: #004d40; }