*{box-sizing:border-box}
:root{
  --accent:#AC1A2F; /* your preferred red */
  --grid:#ddd;
  --grid-bold:#888;
}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  background:#f7f7f7;
  color:#222;
  display:flex;
  flex-direction:column;
  min-height:100vh;
}
header{
  padding:0.75rem 1rem;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:0.75rem 1rem;
  background:#fff;
  border-bottom:1px solid #eee;
}
h1{
  margin:0;
  color:var(--accent);
  font-size:1.35rem;
  letter-spacing:0.5px;
}
.controls{
  display:flex;
  align-items:center;
  gap:0.5rem;
  margin-left:auto;
}
.controls select, .controls button, .controls label{
  font-size:0.95rem;
}
button{
  border:1px solid #ccc;
  background:#fff;
  padding:0.45rem 0.7rem;
  border-radius:8px;
}
button:active{transform:scale(0.98)}
.notes-toggle{
  display:flex; align-items:center; gap:0.35rem; padding:0.2rem 0.4rem;
  border:1px solid #ccc; border-radius:8px; background:#fff;
}

main{
  display:grid;
  place-items:center;
  gap:1rem;
  padding:1rem;
  flex:1;
}
.board{
  width:min(92vw, 520px);
  aspect-ratio:1/1;
  display:grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(9, 1fr);
  background:#fff;
  border:2px solid var(--grid-bold);
  border-radius:10px;
  overflow:hidden;
}
.cell{
  position:relative;
  border:1px solid var(--grid);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: clamp(1.1rem, 3.5vw, 1.9rem);
  line-height:1;
  user-select:none;
  cursor:pointer;
  background:#fff;
}
.cell.readonly{
  background:#fafafa;
  color:#000;
  font-weight:600;
}
.cell.selected{ outline:2px solid var(--accent); outline-offset:-2px; z-index:1 }
.cell.conflict{ background:#ffe6e9 }
.cell .notes{
  position:absolute;
  inset:0;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  padding:3px;
  gap:1px;
  font-size: clamp(0.45rem, 1.7vw, 0.8rem);
  color:#666;
}
.cell .notes span{
  display:flex; align-items:center; justify-content:center;
  opacity:0.9;
}
.cell .val{
  z-index:1;
}
.cell:nth-child(9n+1){ border-left:2px solid var(--grid-bold) }
.cell:nth-child(9n){ border-right:2px solid var(--grid-bold) }
.cell:nth-child(n+1):nth-child(-n+9){ border-top:2px solid var(--grid-bold) }
.cell:nth-last-child(-n+9){ border-bottom:2px solid var(--grid-bold) }

/* Thick subgrid lines */
.cell{
  border-right:1px solid var(--grid);
  border-bottom:1px solid var(--grid);
}
.cell.subgrid-right{ border-right:2px solid var(--grid-bold) }
.cell.subgrid-bottom{ border-bottom:2px solid var(--grid-bold) }

.numpad{
  width:min(92vw, 520px);
  display:grid;
  grid-template-columns: repeat(9, 1fr);
  gap:0.5rem;
}
.numpad button{
  padding:0.8rem 0;
  font-size:1.1rem;
}
footer{
  text-align:center;
  padding:0.75rem;
  color:#666;
}
@media (hover:hover){
  .cell:hover{ background:#f3f6ff }
}
