.mp-wrapper{max-width:860px;margin:24px auto}
.mp-preview-block{margin:0 0 16px 0;text-align:center}
.mp-preview-canvas{width:100%;height:auto;max-width:860px;border:1px dashed #d1d5db;border-radius:12px;background:#fff}
.mp-preview-hint{color:#6b7280;font-size:13px;margin-top:6px}
.mp-form{padding:16px;border:1px solid #e5e7eb;border-radius:12px;background:#fff}
.mp-field{margin-bottom:14px}
.mp-field label{display:block;font-weight:600;margin-bottom:6px}
.mp-field input[type="text"],.mp-field input[type="email"],.mp-field input[type="file"]{width:100%;padding:10px;border:1px solid #d1d5db;border-radius:8px}
.mp-frames{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}
.mp-frame{display:block;border:1px solid #e5e7eb;border-radius:10px;padding:8px;text-align:center;background:#fafafa;cursor:pointer}
.mp-frame img{max-width:100%;height:auto;border-radius:8px;display:block;margin:0 auto 6px}
.mp-frame input[type="radio"]{display:none}
.mp-frame-selected{outline:3px solid #111827}
.mp-actions{text-align:center;margin-top:16px}
.mp-actions button{padding:12px 16px;border-radius:10px;border:0;background:#111827;color:#fff;font-weight:700;cursor:pointer}
.mp-actions button[disabled]{opacity:0.5;cursor:not-allowed}
.mp-success{max-width:860px;margin:16px auto;padding:12px;border-left:4px solid #10b981;background:#ecfdf5;border-radius:8px}
.mp-download{display:inline-block;margin-top:6px;padding:10px 12px;background:#111827;color:#fff;border-radius:8px;text-decoration:none}
.mp-share{margin-top:10px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.mp-share-btn{display:inline-block;padding:8px 10px;border-radius:8px;background:#f3f4f6;text-decoration:none;color:#111827;border:1px solid #e5e7eb}
.mp-result{max-width:100%;height:auto;border-radius:12px;border:1px solid #e5e7eb}


/* ===========================
   LAYOUT DO PREVIEW + FORM
   =========================== */

.mp-preview-block {
  max-width: 420px;
  margin: 0 auto 20px;
}

.mp-preview-canvas {
  width: 100%;
  height: auto;
  max-width: 420px;
}

/* ===== DESKTOP ===== */
@media (min-width: 992px) {

  .mp-preview-block,
  .mp-form {
    display: inline-block;
    vertical-align: top;
  }

  .mp-preview-block {
    width: 40%;
    margin-right: 4%;
  }

  .mp-form {
    width: 56%;
  }
}

/* ===== MOBILE ===== */
@media (max-width: 991px) {

  .mp-preview-block {
    width: 100%;
    max-width: 320px;
    margin: 20px auto;
  }

  .mp-preview-canvas {
    max-width: 320px;
  }
}