body { font-family: Calibri, Candara, "Segoe UI", Segoe, Arial, sans-serif; margin: 0; background: #0b1020; color: #fff; }
.wrap { max-width: 1100px; margin: 0 auto; padding: 24px; }
h1 { margin: 0 0 6px; }
.sub { margin: 0 0 18px; opacity: 0.85; }

.card { display: grid; grid-template-columns: 360px 1fr; gap: 16px; align-items: start; }
.form { background: rgba(255,255,255,0.06); padding: 16px; border-radius: 12px; }
label { display: block; font-size: 14px; margin: 10px 0; }
input, textarea {
  width: 100%;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(0,0,0,0.25);
  color: #fff;
  outline: none;
  font-family: Calibri, Candara, "Segoe UI", Segoe, Arial, sans-serif;
  font-size: 14px;
}

textarea {
  resize: vertical;
}
.row { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
button { padding: 10px 12px; border-radius: 10px; border: 0; cursor: pointer; }
button:disabled { opacity: 0.5; cursor: not-allowed; }
.note { font-size: 12px; opacity: 0.8; margin-top: 10px; }

.preview { background: rgba(255,255,255,0.12); padding: 16px; border-radius: 12px; }
canvas { width: 100%; height: auto; border-radius: 10px; background: #787777; }

footer { margin-top: 16px; opacity: 0.75; }
@media (max-width: 900px){
  .card { grid-template-columns: 1fr; }
}