.mh-overlay {
  position: fixed;
  top:0; left:0; width:100%; height:100%;
  background: rgba(0,0,0,0.5);
  display: flex; justify-content: center; align-items: center;
  opacity: 0; pointer-events: none; transition: opacity 0.2s ease;
  z-index: 1000;
}
.mh-overlay.active { opacity:1; pointer-events:auto; }

.mh-modal {
  background: #fff; border-radius: 8px; box-shadow: 0 5px 20px rgba(0,0,0,0.3);
  display: flex; flex-direction: column; max-height: 90%; overflow: hidden;
  transform: translateY(-30px); opacity:0; transition: all 0.2s ease;
}
.mh-overlay.active .mh-modal { transform: translateY(0); opacity:1; }

.mh-small { width: 300px; }
.mh-medium { width: 600px; }
.mh-large { width: 90%; max-width: 900px; }

.mh-header { padding:16px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid #eee; }
.mh-title { margin:0; font-size:1.2em; }
.mh-close { cursor:pointer; font-size:24px; font-weight:bold; }

.mh-body { padding:16px; overflow-y:auto; flex:1; }

.mh-footer { padding:16px; border-top:1px solid #eee; display:flex; justify-content:flex-end; gap:10px; }

.mh-btn { padding:8px 16px; border:none; border-radius:4px; cursor:pointer; }
.mh-btn-primary { background:#007bff; color:white; }
.mh-btn-secondary { background:#6c757d; color:white; }
.mh-btn-danger { background:#dc3545; color:white; }