.grid{width:100%;height:100%;max-width:100%;max-height:100%}.grid-cell:hover{background-color:#e0e0e0}.grid-cell.active:hover,.grid-cell:hover{box-shadow:2px 2px 4px rgba(0,0,0,.3);border-color:hsla(0,0%,100%,.4) rgba(0,0,0,.2) rgba(0,0,0,.2) hsla(0,0%,100%,.4);border-style:solid;border-width:2px;box-shadow:inset 2px 2px 4px rgba(0,0,0,.2),inset -2px -2px 4px hsla(0,0%,100%,.1)}.grid-cell.active:hover{background-color:#4caf50}.grid-cell.active{background-color:#45a049}.figure-grid .grid-cell.active,.grid-cell.active{box-shadow:inset 0 -1px 3px rgba(0,0,0,.2),inset 0 1px 3px hsla(0,0%,100%,.2),0 1px 3px rgba(0,0,0,.2)}.figure-grid .grid-cell.active{background-color:#ff8c00}.figure-grid .grid-cell.active:hover{background-color:orange;box-shadow:2px 2px 4px rgba(0,0,0,.3),inset 2px 2px 4px rgba(0,0,0,.2),inset -2px -2px 4px hsla(0,0%,100%,.1)}.solution-display-container{padding:2rem;max-width:1400px;margin:0 auto;display:flex;flex-direction:column;align-items:center}.white-container h2{text-align:center;margin-bottom:2rem;color:#333}.solution-steps{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:2rem}.solution-step{background-color:#fff;padding:1.5rem;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.1);min-width:300px;flex:1 1}.grid-wrapper{margin:1rem auto;width:300px;height:300px}.step-arrow{display:flex;align-items:center;font-size:2rem;color:#3498db;padding:0 1rem}@media (max-width:1200px){.solution-steps{align-items:center}.step-arrow{padding:1rem 0;transform:rotate(90deg)}}@media (max-width:600px){.white-container{padding:1.5rem}.solution-step{flex-direction:column;align-items:center;min-width:250px;padding:1rem}.grid-wrapper{width:250px;height:250px}}.grid-container{display:flex;justify-content:center;align-items:center;margin:0 auto;width:100%}.grid{display:grid;grid-gap:1px;gap:1px;width:250px;height:250px;border:2px solid grey;background-color:grey;touch-action:none}.grid-cell{background-color:#f0f0f0;display:flex;align-items:center;justify-content:center;-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:pointer;transition:background-color .3s ease;position:relative}.grid-cell.active-green{background-color:#45a049}.grid-cell.active-green,.grid-cell.active-orange{box-shadow:inset 0 -1px 3px rgba(0,0,0,.2),inset 0 1px 3px hsla(0,0%,100%,.2),0 1px 3px rgba(0,0,0,.2)}.grid-cell.active-orange{background-color:#ff8c00}.grid-cell.red-orange{background-color:#ff8c00}.grid-cell.red-green,.grid-cell.red-orange{border:3px solid #ff1f1f;box-sizing:border-box}.grid-cell.red-green{background-color:#45a049}.upload-container{max-width:1400px;margin:2rem auto;background:#fff;border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,.1)}.drop-zone,.upload-container{display:flex;flex-direction:column;align-items:center;padding:2rem}.drop-zone{width:95%;min-height:200px;border:2px dashed #ccc;border-radius:8px;justify-content:center;text-align:center;transition:all .3s ease;margin-bottom:1rem}p{font-family:sans-serif}.drop-zone.dragging{border-color:#011020;background-color:rgba(0,123,255,.05)}.file-input-label{background-color:#030e1b;color:#fff;padding:.75rem 1.5rem;border-radius:6px;cursor:pointer;transition:background-color .3s ease;margin-top:1rem}.file-input-label:hover{background-color:#43474b}.image-preview{position:relative;width:100%;display:flex;flex-direction:column;align-items:center}.image-preview img{max-width:100%;max-height:300px;border-radius:6px;border:1px solid #ddd;margin-bottom:1rem}.remove-btn{background-color:#dc3545;color:#fff;border:none;padding:.5rem 1rem;border-radius:4px;cursor:pointer;transition:background-color .3s ease}.remove-btn:hover{background-color:#c82333}.action-buttons{display:flex;flex-direction:column;width:100%;gap:1rem;margin-top:1rem}.upload-btn{background-color:#28a745;color:#fff;border:none;padding:.75rem 1.5rem;border-radius:6px;cursor:pointer;transition:background-color .3s ease}.upload-btn:hover{background-color:#218838}.manual-input-btn{background-color:#6c757d;color:#fff;border:none;padding:.75rem 1.5rem;border-radius:6px;cursor:pointer;transition:background-color .3s ease}.manual-input-btn:hover{background-color:#5a6268}.divider{display:flex;align-items:center;text-align:center;color:#6c757d;margin:.5rem 0}.divider:after,.divider:before{content:"";flex:1 1;border-bottom:1px solid #dee2e6}.divider:before{margin-right:.5rem}.divider:after{margin-left:.5rem}.status-message{margin-top:1rem;color:#6c757d;font-style:italic}@media (max-width:600px){.upload-container{max-width:300px}.drop-zone{width:80%}}.manual-input-container{padding:2rem;max-width:1400px;margin:0 auto;display:flex;flex-direction:column;align-items:center}.white-container{background:#fff;padding:2rem;border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,.1);width:100%;margin-bottom:2rem}.grids-layout{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:155px}.board-section{display:flex;flex-direction:column;align-items:center;min-width:300px}.figures-section{display:flex;flex-wrap:wrap;justify-content:center;gap:25px;min-width:300px}.single-figure{display:flex;flex-direction:column;align-items:center}h2,h3{text-align:center;margin-bottom:1rem;color:#333;font-family:sans-serif}h2{font-size:1.5rem}h3{font-size:1.1rem}.grid-container{background:#f8f8f8;border-radius:8px;box-sizing:border-box}.board-section .grid-container{width:300px;height:300px}.single-figure .grid-container{width:150px;height:150px}.solve-button{background-color:#007bff;color:#fff;padding:.75rem 2rem;font-size:1rem;border:none;border-radius:6px;cursor:pointer;transition:background-color .3s ease;box-shadow:0 2px 6px rgba(0,0,0,.1)}.solve-button:hover{background-color:#0056b3}.clear-button{background-color:#e0e0e0;color:#333;font-weight:700;padding:.75rem 2rem;font-size:1rem;border:2px solid #000;border-radius:6px;cursor:pointer;transition:background-color .3s ease;box-shadow:0 2px 6px rgba(0,0,0,.1)}.clear-button:hover{background-color:#c2c2c2}@media (max-width:1200px){.grids-layout{flex-direction:column;align-items:center;gap:2rem}.figures-section{width:100%}}@media (max-width:600px){.white-container{padding:1.5rem}.board-section .grid-container{width:250px;height:250px}.single-figure .grid-container{width:120px;height:120px}}