body { font-family: sans-serif; padding: 20px; }
canvas { border: 1px solid #ccc; cursor: default; display: block; margin-top: 10px; }

.controls {
  margin-top: 15px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  background: #f8f8f8;
  padding: 15px;
  border-radius: 8px;
}
.controls > div { display: flex; align-items: center; gap: 8px; }
.controls label { display: flex; align-items: center; gap: 4px; }
.controls input[type="number"] { width: 70px; padding: 4px; }
.controls input[type="checkbox"] { width: 18px; height: 18px; }
.controls button { padding: 5px 12px; cursor: pointer; }

.ratio-buttons button {
  background: #e0e0e0;
  border: 1px solid #aaa;
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 14px;
}
.ratio-buttons button:hover { background: #d0d0d0; }

#status { margin-left: 15px; color: green; }

.upscale-controls {
  margin-top: 15px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  background: #eef6ff;
  padding: 15px;
  border-radius: 8px;
}
.upscale-controls > div { display: flex; align-items: center; gap: 8px; }
.upscale-controls select,
.upscale-controls input[type="number"] { padding: 4px; }

#resultBox {
  display: none;
  margin-top: 20px;
  padding: 15px;
  background: #f0fff4;
  border: 1px solid #b7ebc6;
  border-radius: 8px;
}
#resultBox h3 { margin: 0 0 10px 0; }
#resultImg {
  max-width: 100%;
  border: 1px solid #ccc;
  cursor: zoom-in;
  background:
    linear-gradient(45deg, #eee 25%, transparent 25%),
    linear-gradient(-45deg, #eee 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #eee 75%),
    linear-gradient(-45deg, transparent 75%, #eee 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}
#resultBox a { display: inline-block; margin-top: 8px; }