* { box-sizing: border-box; }
body { font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; margin: 0; }
.topbar { display:flex; align-items:center; gap:1rem; padding:.75rem 1rem; box-shadow:0 1px 4px rgba(0,0,0,.1); }
.controls > * { margin-right:.5rem; }

/* Board centrata e dimensione al contenuto */
.board {
  display: inline-grid;                 /* evita il “rettangolone” grigio */
  grid-template-columns: repeat(9, 3rem);
  grid-auto-rows: 3rem;
  gap: 0;                               /* usiamo i bordi delle celle */
  margin: 1rem auto;                    /* centra orizzontalmente */
  background: #fff;
  border: 2px solid #888;               /* bordo esterno */
}

/* Celle e selezione */
.cell {
  background:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:1.2rem; cursor:pointer; user-select:none;
  border: 1px solid #ccc;               /* linee sottili */
}
.cell.fixed { background:#f6f6f6; font-weight:600; }
.cell.error { background:#ffe6e6; }
.cell.selected { outline: 2px solid #3b82f6; outline-offset: -2px; }

/* Linee spesse ogni 3 */
.cell.bt { border-top:    2px solid #000; }
.cell.bl { border-left:   2px solid #000; }
.cell.bb { border-bottom: 2px solid #000; }
.cell.br { border-right:  2px solid #000; }

.status { padding: 0 1rem 1rem; color:#444; }