.mfm-form {
  border: 1px solid #e5e7eb;
  padding: 16px;
  border-radius: 8px;
  background: #fff;
}
.mfm-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.mfm-col label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
}
.mfm-col input[type="text"],
.mfm-col input[type="number"],
.mfm-col select,
.mfm-col textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
}
.mfm-col input[type="checkbox"] {
  transform: translateY(2px);
}
.mfm-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.mfm-msg {
  margin: 10px 0;
  padding: 10px 12px;
  border-radius: 6px;
}
.mfm-success {
  background: #ecfdf5;
  border: 1px solid #10b981;
  color: #065f46;
}
.mfm-error {
  background: #fef2f2;
  border: 1px solid #ef4444;
  color: #7f1d1d;
}
.mfm-req {
  color: #ef4444;
  margin-left: 4px;
}
.mfm-actions {
  margin-top: 12px;
}
.mfm-note {
  grid-column: 1 / -1;
}
.mfm-tabs {
  margin-bottom: 10px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.mfm-tab {
  padding: 6px 10px;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  border-radius: 6px;
  cursor: pointer;
  user-select: none;
}
.mfm-tab.active {
  border-color: #2563eb;
  color: #1d4ed8;
  background: #eef2ff;
}
.mfm-tabpanel {
  display: none;
}
.mfm-tabpanel.active {
  display: block;
}

/* Optional: tiny UX sugar */
.mfm-dirty {
  outline: 2px dashed #f59e0b;
  outline-offset: 2px;
}