.mg-generator { display:grid; grid-template-columns: 360px 1fr; gap:16px; align-items:start; }
.mg-left, .mg-right {
  background:#0f1115; border:1px solid #1b1f2a; border-radius:16px; padding:16px;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.02) inset;
}
.mg-image-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:12px; }
.mg-thumb-btn { border:1px solid #1b1f2a; background:#0c0e13; border-radius:12px; padding:0; overflow:hidden; cursor:pointer; }
.mg-thumb-btn img { display:block; width:100%; height:auto; border-radius:12px; }
.mg-thumb-btn.active { outline:2px solid #22c55e; }

.mg-controls .mg-label { color:#e5e7eb; font-weight:600; margin:10px 0 6px; }
.mg-controls input[type="text"],
.mg-controls input[type="number"],
.mg-controls select {
  width:100%; padding:10px 12px; border:1px solid #1f2430; border-radius:12px; background:#0c0e13; color:#e5e7eb;
}
.mg-row { display:flex; align-items:center; gap:8px; margin-top:10px; color:#cbd5e1; }
.mg-btn { width:100%; margin-top:12px; padding:12px 14px; border:0; border-radius:12px; cursor:pointer; font-weight:600; }
#mg-download { background:#22c55e; color:#0a0f14; }
#mg-open { background:#1f2937; color:#e5e7eb; }
.mg-btn[disabled]{ opacity:.55; cursor:not-allowed; }

.mg-right { max-width:100%; max-height:90vh; overflow:auto; }
.mg-right canvas { width:100% !important; height:auto !important; max-height:70vh; display:block;   object-fit: contain; border-radius:12px; }
@media (max-width: 900px){ .mg-generator{ grid-template-columns:1fr; } .mg-right{ order:-1; } }