body{
  background: #02004E;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  margin: 0;
  padding: 0;
}

.logo{
  width: 320px;
  margin-top: 30px;
}

.container {
  margin-top: 20px;
  padding: 20px;
  border-radius: 16px;
}

#tokenLabel {
  font-size: 16px;
  opacity: 0.85;
  margin-bottom:8px;
}

input{
  background:#111;
  border:1px solid #555;
  color:#fff;
  padding:12px;
  font-size:16px;
  width:160px;
  border-radius:12px;
}

button{
  background:#AC2BB3;
  color:#fff;
  border:1px solid #AC2BB3;
  padding:12px 24px;
  margin:10px;
  font-size:16px;
  cursor:pointer;
  border-radius:12px;
}
button:hover{
  background:#9e26a0;
}

/* Canvas visivo scalato */
#canvasView{
  width: 100%;
  height: auto;
  margin: 20px 0;
  border:1px solid #555;
}

/* Upload Area */
#uploadArea {
  margin-top:30px;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));
  gap:15px;
  justify-items:center;
}

#uploadArea .slotPreview {
  width:120px;
  height:120px;
  border:1px solid #777;
  background:#00FF1E;
  margin-bottom:8px;
}

#uploadArea input[type=file] {
  width:120px;
  border-radius:12px;
  border:1px solid #555;
  background:#AC2BB3;
  color:#fff;
  padding:6px;
  cursor:pointer;
}

#uploadArea p {
  font-size:12px;
  color:#fff;
  margin:4px 0 0 0;
  text-align:center;
}